vue按键修饰符

1.在做项目中有时会用到键盘事件,那么vue也提供了监听键盘事件。我们可以通过v-on添加按键修饰符,完成相应的功能。

2.代码实现:

<div >

<input type="text" >

<button v-on:click="submit()" >你点我试试</button>

</div>

<script type="text/javascript" src="js/vue.js">

</script>

<script type="text/javascript">

new Vue({

el: '#app',

methods: {

submit() {

alert("试试就试试");

}

}

})

</script>

3.代码解释

v-on:keyup.enter="submit()"

v-on指令绑定enter键事件,点击执行submit()函数事件,

同样也可以简写为@keyup.enter="submit()"

下面的button按钮也绑定了点击事件,执行函数submit();

4.同样vue监听按键事件也可以添加其他的按键:只要加上相应的按键的名称就行了

例如:@keyup.tab="";@keyup.delet = "";

里面写按键触发执行的事件就可以了。