<template>
<div id="app">
<!-- 监听键盘事件 -->
<input type="text" v-model="todo" @keydown="AddText($event)">
<br>
<hr>
<h2>未完成</h2>
<ul>
<li v-for="(item,index) in list" :key="index">
<div v-if="!item.checkbox">
<input type="checkbox" v-model="item.checkbox"> {{item.title}}---<button @click="RemoveText(index)">删除</button>
</div>
</li>
</ul>
<h2>已完成</h2>
<ul>
<li v-for="(item,index) in list" :key="index" class="finish">
<div v-if="item.checkbox">
<input type="checkbox" v-model="item.checkbox"> {{item.title}}---<button @click="RemoveText(index)">删除</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
todo:'',
list:[],
}
},
methods:{
AddText(e){
console.log(e.keyCode)
// 如果点击回车键
if(e.keyCode==13){
this.list.push({title:this.todo,checkbox:false})
this.todo=''
}
},
RemoveText(key){
this.list.splice(key,1)
}
}
}
</script>
<style>
ul li{
list-style-type:none;
}
.finish{
background-color: #eee
}
</style>
vi-if与v-show用法相同,v-if是代表根据条件渲染,v-show是代表将所有的都渲染出来,根据条件显示。