todolist
<template>
<div id="app">
<!--添加文件框，设置双向绑定，并添加键盘监听事件（回车键：13）-->
<input type="text" v-model="todo" @keydown="doAdd($event)"/>
<!--添加按钮，设置点击事件-->
<button @click="doadd()">+增加</button>
<br>
<hr>
<h2>进行中</h2>
<ul>
<!--将文本框的内容添加在列表里，逐条显示。并在每条数据前设置单选框，与变量checked进行双向绑定，每条数据后设置删除按钮-->
<!--按删除键数据删除，当单选框为false时数据不显示-->
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model='item.checked'> {{item.title}}---<button @click="del(key)">删除</button>
</li>
</ul>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model='item.checked'> {{item.title}}---<button @click="del(key)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data () { /*业务逻辑里面定义的数据 */
return {
todo:'',
list:[],
}
},methods:{
doadd(){
//获取文本款输入得值
//把文本框的值push到list里
this.list.push({
title:this.todo,
checked:false,
}
);
this.todo='';
},del(key){
//删除指定列
this.list.splice(key,1);
},
doAdd(e){
//键盘事件
if (e.keyCode==13){
this.list.push({
title:this.todo,
checked:false,
}
);
this.todo='';
}
}
}
}
</script>
<style land="scss">
</style>