如何单击按钮不仅可以直接单击鼠标,还可以按键盘上的按钮(在这种情况下,它s a keyboard button with a value "1" that has
event.key` = 1)?
new Vue({
el: "#app",
data: {
one: 1
},
methods: {
add(){
this.one++;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:1 @click="add">One</button>
<span> {{ one }}</span>
</div>
答案 0 :(得分:1)
如果要侦听全局键盘事件,则需要将侦听器添加到窗口,否则,您需要关注事件从其派发的元素。
这只是普通的Vanila js:
new Vue({
el: "#app",
data: {
one: 1
},
created() {
const component = this;
this.handler = function (e) {
e.keyCode == 38 && component.add()
e.keyCode == 40 && component.remove()
}
window.addEventListener('keyup', this.handler);
},
beforeDestroy() {
window.removeEventListener('keyup', this.handler);
},
methods: {
remove() {
this.one--;
},
add(){
this.one++;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="add">One</button>
<span> {{ one }}</span>
</div>
答案 1 :(得分:0)
这已包含在VueJS文档中。
关键修饰符
在监听键盘事件时,我们经常需要检查 特定键。 Vue允许在收听时为v-on添加关键修饰符 关键事件:
<!-- only call `vm.submit()` when the `key` is `Enter` --> <input v-on:keyup.enter="submit">
您可以直接使用通过KeyboardEvent.key公开的任何有效键名。 通过将它们转换为kebab-case作为修饰符。
<input v-on:keyup.page-down="onPageDown">
在上面的示例中,仅当$ event.key为 等于“ PageDown”。