今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图

html代码如下

<div id="app">
        <label>
            标签名: <input type="text" v-model="content" placeholder="例如：工作，学习">
        </label>
        <button @keyup.enter="addlist">添加标签</button><br>
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id">
               {{index}} {{item.something}} <button @click="remove(index)">删除</button>
            </li>
        </ul>

    </div>

js代码如下

var app = new Vue({
        el:"#app",
        data(){
            return{
                content:'',
                datalist:[
                    {id:0,something:'赵喜娜'},
                    {id:1,something:'Jhon Sena'},
                    {id:2,something:'visual studio code'},
                ],
                nextId:3,
            }
        },
        methods:{
            addlist(){
                this.datalist.push(
                    {id:this.nextId++,something:this.content}
                )
                this.content=''
            },
            remove(index){
                this.datalist.splice(index,1)
                console.log(index)
            }
        },
        created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },
    })

其中，官网上讲到了一个按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

我在代码里加上了@keyup.enter 然而，按回车键并没有什么用，要先获得一次焦点以后才能够按键触发，当然也百度到了解决办法，办法就是在created里面添加一个键盘事件

    created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },

就ok了