【vue笔记】6.键盘修饰符

最新推荐文章于 2024-07-04 10:21:44 发布

AXIMI

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量202

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/AXIMI/article/details/88101325

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

现在对如下的用户管理系统进行修改，使得在添加用户时，输入回车键可以直接添加用户，而不是要点击add按钮才可以添加。要实现这个功能可以使用键盘修饰符。
在这里插入图片描述
对Name输入框的代码可以修改为：

<label>
            Name:<input type="text" v-model="name" @keyup.enter="add"></label>

@keyup表示键盘抬起
.enter表示当键盘的输入为enter时
最终的效果是输入完用户名，点击enter键后，我们输入的用户名就会添加到列表中

全部代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height:30px;
            background-color:crimson
        }
    </style>
    <link href="./cssfiles/table_type1.css">
</head>
<body>
    <div id="app">
        <div class="inner">user management</div>
        <label>
            Id:<input type="text" v-model="id">
        </label>
        <label>
            Name:<input type="text" v-model="name" @keyup.enter="add">
        </label>
        <input type="button" value="add" @click="add">
        <label>
            Search:<input type="text" v-model="keywords">
        </label>

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{item.name}}</td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="delete(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'userA',ctime:new Date()},
                    {id:2,name:'userB',ctime:new Date()},
                    {id:3,name:'userC',ctime:new Date()}
                ],
                msg:'vue test'
            },
            methods:{
                add(){
                    var user={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(user)
                    this.id=''
                    this.name=''
                },
                delete(id){
                    this.list.some((item,i) => {
                        if(item.id==id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList=[]
                    this.list.forEach(item=>{
                        if(item.name.indexOf(keywords)!=-1){
                            newList.push(item)
                        }
                    })
                    return newList
                }
            }
        })    
    </script>
</body>
</html>