欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-07 19:24:28
1、我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件、或者按下ESC退出页面等各种各样的场景。在Vue中,可以通过键盘修饰符来实现这样的场景。 2、事例代码: 这里在车名的input框里添加keyup事件,即键盘按下抬起时触发;后面的“enter”即为按键修饰符,定义哪个按键会触发该 ......

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等其他按键事件,大家有空的话可以尝试使用其他按键事件。

 

每天进步一点点!

 

上一篇:

下一篇: