Question

我有一个变量，我想在按下alt键时将其设置为1，而在没有按下键时将其设置为0，但是结果是Vue仅执行@ keydown.alt。

我尝试使用Enter键，它在两个状态之间切换时效果很好，但是我不知道为什么不使用Alt键。

    @keydown.alt="scheda++"
    @keyup.alt="scheda--"

Answer 1

从Vuejs documentation：

请注意，修饰键与常规键不同，当与按键事件一起使用时，必须在发出事件时按下它们。换句话说，keyup.ctrl仅在按住ctrl的同时释放键时才会触发。如果您单独释放ctrl键，则不会触发。如果确实需要这种行为，请改用ctrl的keyCode：keyup.17

但是对于 Alt ，如果您使用Windows，则还有另一个问题。在Windows系统上，窗口将按 Alt 解释为要打开窗口的菜单，并且keyup不再触发。我们想防止默认行为，可以使用event.preventDefault()来完成，或者在Vue世界中使用.prevent event modifier。

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
  	increment: function() {
    	console.log('inc')
    	this.counter += 1;
    },
    decrement: function() {
    	console.log('dec')
    	this.counter -= 1;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input @keydown.18.prevent="increment()" @keyup.18.prevent="decrement()">
  <p >{{ counter }}</p>
</div>

为什么在Vue.js上使用@ keydown.alt可以，但是@ keyup.alt不能呢？

1 个答案: