Vue学习之路第十九篇：按键修饰符的使用

1、我们工作中经常会有类似于这样的需求：按下Enter键触发某个事件、或者按下ESC退出页面等各种各样的场景。在Vue中，可以通过键盘修饰符来实现这样的场景。

2、事例代码：

<body>
    <divi id="app">
        序号：<input type="text" v-model="idValue"/>
        车名：<input type="text" v-model="nameValue" @keyup.enter="add()"/>
        <p v-for="item in list">
           序号：{{item.id }} , 车名：{{ item.name }}<br/> 
        </p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                idValue:'',
                nameValue:'',
                list:[
                    {id:1,name:'奥迪'},
                    {id:2,name:'宝马'}
                ]
            },
            methods:{
                add(){
                    this.list.unshift({
                        id : this.idValue,
                        name : this.nameValue
                    });
                }
            }
        })
    </script>
</body>

这里在车名的input框里添加keyup事件，即键盘按下抬起时触发；后面的“enter”即为按键修饰符，定义哪个按键会触发该事件。所以当光标位于该input框时，按下Enter键抬起就会触发事件执行add方法，并添加新数据展示在页面上。

3、除了enter键以外，vue还定义了以下按键修饰符：tab、delete (捕获“删除”和“退格”键)、esc、space、up、down、left、right；这些是官网提供的修饰符，但是实际进行操作的时候发现，几乎所有的键盘按键都可以用来作为修饰符，大家有空可以自己尝试一下，毕竟vue更新速度还是比较快的，真理还是要来自于实践。

4、除了使用以上方法，我们还可以使用keycode（键盘码）来作为修饰符使用。如：f2的键盘码为113，我们可以修改代码为：

车名：<input type="text" v-model="nameValue" @keyup.113="add()"/>

这时光标在input框时，我们按下再松开f2时也可以触发事件。

注：不管是使用键盘名称还是使用键盘码都要防止快捷键的冲突，快捷键冲突的时候会不起作用。

5、当然按键事件除了keup还有kedown等其他按键事件，大家有空的话可以尝试使用其他按键事件。

每天进步一点点！

Vue学习之路第十九篇：按键修饰符的使用

猜你喜欢