今天在官网上进修过程当中看到了一个挺风趣的东西，详细结果以下图

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了