今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图
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了