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 = "";

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