Vue中的按键修饰符

最新推荐文章于 2024-05-17 14:32:46 发布

huxiaoxiao.

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量554

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121740478

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

在我们平常登录功能的操作中，输入密码后会按下回车进行登录，这样就不需要在操作鼠标点击登录按钮了，那么这一功能在vue中是怎么实现的呢

我们做一个简单的添加数据功能，来演示这个案例：

  <style>
        table{
            width:760px;
            /* margin: 0 auto; */
            border-collapse: collapse;
        }   
        table td{
            border: 1px solid black;
            width: .4rem;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <label for="">id</label>
        <input type="text" v-model="id">
        <label for="">name</label>
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add()">

        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'哈哈'}
                ],
                id:'',
                name:''
            },
            methods: {
                add(){
                    // 向数组的最后一位添加新的对象
                    this.list.push({id:this.id,name:this.name})
                    // 完成添加后清空文本框
                    this.id=this.name=""
                }
            }
        })
    </script>
</body>

这个时候是这可以通过点击添加按钮去添加的

在原生js中有提供了 keyup 按键抬起事件，那么可以把方法中心的 add 方法绑定到 keyup 抬起事件中，看看能否达到想要的效果，因为我们是在输入完 name 之后去敲回车，所以把 keyup 事件绑定到我们的 name 文本框中

 <input type="text" v-model="name" @keyup="add()">

可以看到，当输入完name之后还没有敲击回车键，就已经自动添加了，这时候就需要用到按键修饰符了

                                 <!-- enter:回车键 -->
<input type="text" v-model="name" @keyup.enter="add()">

当输入完成后，并且文本框还在获得焦点的同时，在敲回车的时候，才会执行add函数：

除了 enter 之外，Vue官网还提供了以下修饰符：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

那么除了Vue提供的这些按键之外，其他按键可不可以使用呢，我们拿 f4 举个例子

<input type="text" v-model="name" @keyup.f4="add()">

这是Vue在2.5.0新增的自动匹配按键修饰符，但是我们一般只使用功能键去充当按键修饰符，

尽量不要使用要输入的键

huxiaoxiao.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的按键修饰符

在我们平常登录功能的操作中，输入密码后会按下回车进行登录，这样就不需要在操作鼠标点击登录按钮了，那么这一功能在vue中是怎么实现的呢我们做一个简单的添加数据功能，来演示这个案例： <style> table{ width:760px; /* margin: 0 auto; */ border-collapse: collapse; } table td{ .
复制链接

扫一扫