如何使用键盘按钮操作数字

Question

如何单击按钮不仅可以直接单击鼠标，还可以按键盘上的按钮（在这种情况下，它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>

Answer 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>

Answer 2

这已包含在VueJS文档中。

From the documentation:

  

关键修饰符

     

在监听键盘事件时，我们经常需要检查   特定键。 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”。