大致功能：
1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）
2、动态计算有几个未完成的任务
3、点击复选框，实现选中或不选中效果（即完成或未完成）
4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表
5、双击列表中的内容，可对列表内容进行编辑
编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑
如果想要取消修改，按esc键即可取消编辑
6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表
7、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储）
未添加任务的效果图：
添加了任务的效果图：
组件代码如下：
<template>
<div>
<div class="header">
<div>
<h3>任务计划列表</h3>
</div>
</div>
<div class="con">
<h4>添加任务：</h4>
<input type="text" class="add" placeholder="回车即可添加任务" v-model="text" @keydown.enter="add">
<ul class="renwu">
<li>
<button @click="btn($event)">完成的任务</button>
<span>{{yi}}</span>
</li>
<li>
<button @click="btn($event)">未完成的任务</button>
<span>{{wei}}</span>
</li>
<li>
<button @click="btn($event)">所有任务</button>
<span>{{this.list.length}}</span>
</li>
</ul>
<h4>任务列表：</h4>
<ul v-show="this.quanShow" class="list">
<li v-for="(item,index) of list" :key="index">
<input type="checkbox" v-model="item.done" class="checkbox">
<input type="text" v-model="item.title" class="bj">
<button @click="remove(index)">删除</button>
</li>
</ul>
<ul v-show="this.weiShow" class="list">
<li v-for="(item,index) of list" :key="index" v-if="!item.done">
<input type="checkbox" v-model="item.done" class="checkbox">
<input type="text" v-model="item.title" class="bj">
<button @click="remove(index)">删除</button>
</li>
</ul>
<ul v-show="this.yiShow" class="list">
<li v-for="(item,index) of list" :key="index" v-if="item.done">
<input type="checkbox" v-model="item.done" class="checkbox">
<input type="text" v-model="item.title" class="bj">
<button @click="remove(index)">删除</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text:"",
list:[],
quanShow:true,
yiShow:false,
weiShow:false,
}
},
components: {},
props: {},
watch: {
// 监听list
list:{
handler(){
localStorage.setItem("arr",JSON.stringify(this.list))
},
// 深度监听
deep:true,
}
},
// 页面加载之前
mounted(){
if(localStorage.getItem("arr")){
this.list=JSON.parse(localStorage.getItem("arr"))
}
},
methods: {
add(){
if(this.text==""){
alert("不能为空")
}else{
var title=this.text;
this.list.unshift({title,"done":false})
this.text=""
}
},
remove(i){
this.list.splice(i,1)
},
btn(e){
// console.log(e.target.innerHTML)
if(e.target.innerHTML=="所有任务"){
this.quanShow=true
this.weiShow=false
this.yiShow=false
}else if(e.target.innerHTML=="完成的任务"){
this.quanShow=false
this.weiShow=false
this.yiShow=true
}else{
this.quanShow=false
this.weiShow=true
this.yiShow=false
}
}
},
computed: {
wei(){
var num=0;
for(var i in this.list){
if(this.list[i].done==false){
num++
}
}
return num
},
yi(){
var num=0;
for(var i in this.list){
if(this.list[i].done==true){
num++
}
}
return num
}
},
template: {},
created (){},
}
</script>
<style scoped>
*{ margin: 0; padding: 0;}
ul,li{list-style: none}
.header{width: 100%;height: 50px;background:#DB4C3F;color: white;line-height: 50px}
.header>div,.con{width: 650px; margin: 0 auto;}
h4{margin:15px 0}
.add{width:100%;height:30px}
.renwu{width: 100%;height: 20px;padding: 10px 0}
.renwu>li{float: right;}
.renwu>li>button{background: none;width:120px;height: 36px;border: none}
.list>li{width: 100%;height: 44px;line-height: 44px; border: 1px solid rgb(207, 202, 202)}
.list>li>.checkbox{float: left;margin: 15px}
.list>li>button{float: right;margin: 12px}
.bj{float: left; margin:8px 0px;height: 20px;width: 300px;border: none}
</style>
