Today, I saw a very interesting thing in the learning process on the official website. The specific effect is as follows:
The html code is as follows
`<div id="app">
<label> //Tag name: < input type = "text" V-model = "content" placeholder = "for example: work, learning" > </label> <button @keyup.enter="addlist">Add tags</button><br> <ul> <li v-for="(item,index) in datalist" :key="item.id"> {{index}} {{item.something}} <button @click="remove(index)">delete</button> </li> </ul> </div>`
js code is as follows
var app = new Vue({ el:"#app", data(){ return{ content:'', datalist:[ {id:0,something:'Zhao Xin Na'}, {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(); } } }, })
Among them, there is a key modifier on the official website
When listening for keyboard events, we often need to check common key values. Vue allows you to add key modifiers for v-on when listening for keyboard events
I added @ keyup.enter to the code. However, it's useless to press enter. You need to get a focus first before you can press the key to trigger. Of course, Baidu's solution is to add a keyboard event in created
created() { var lett=this; document.onkeydown=function(e){ var key=window.event.keyCode; if(key==13){ lett.addlist(); } } },
It's ok.