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学习之路第十九篇：按键修饰符的使用

最新文章

热门文章