一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 修改代码App.vue
<template>
<div id="app">
<input type="text" v-model="todo" @keydown="doAdd($event)"/>
<h2>doing</h2>
<ul>
<li v-for="(item,key) in list" :key="item.id" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
</li>
</ul>
<h2>done</h2>
<ul class ="finish">
<li v-for="(item,key) in list" :key="item.id" v-if="item.checked">
<input type="checkbox" v-model="item.checked"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
todo:'',
list:[
{
title:'write book',
checked:true
},
{
title:'lean cook',
checked:true
}
]
};
},
methods:{
doAdd(e){
if(e.keyCode == 13){//enter
this.list.push({title:this.todo, checked:false});
this.todo = ""
}
},
removeData(key){
this.list.splice(key, 1)
}
}
};
</script>
<style>
.finish li{
background:#eee;
}
</style>
五 运行
npm run dev
image.png
六 总结
1 v-if筛选其的使用,当满足筛选条件时，才显示，可以配合v-else使用。
本例中，时在v-for内使用v-if,用于显示循环中满足条件的项。
2 监听键盘事件时,e.keyCode代表着按键码，其中e.keyCode为13，代表回车键。当然也可以使用@keyup.enter来监听回车事件。
