vue按键修饰符

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

2.代码实现:

 <div id="app">
        <input type="text" id="username" v-on:keyup.enter="submit()">
        <button v-on:click="submit()" id="btn">你点我试试</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 = "";

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

 
 
 
 
 
原文地址:https://www.cnblogs.com/zhengao/p/6641421.html