2021-07-27 使用vue制作todolist（任务计划表）
任务计划表效果
要求：
1.添加代办事项可以增加到正在进行的事项中
2.点击事项的复选框能修改到已完成事项中
3.点击删除，可以删除事项
4.将数据存储到localStroge中
5.点击事项可以修改标题
实现：
一、
data：{
todoItem：{//事项的标题和状态
title:’’,
done:false
}，
todolist:[], //所有的事项
},
computed:{ //计算器
doingList(){ //正在进行的事项，过滤器filter
return this.todolist.filter((item)=>{
return !item.done
})
},
doneList(){ // 已经完成的事项
return this.todolist.filter((item)=>{
return item.done
})
}
}
二、制作页面
1.输入框
input type=“text” placeholder=“输入待办事项标题”
- 事项列表
三、添加数据
1.输入框：v-model=“todoItem.title”
2.有多少件代办事项：doingList.length (计算属性)
3.列表渲染：v-for="item in doingList“
{{item.title}}
四、事件
1.添加待办事项：add(){this.todolist.push(this.todoItem)
this.todoItem = {title:’’,done:false} //清空输入框
}
2.修改事项状态，通过勾选复选框
setDone(item){//设置事项的状态为已完成，和计算属性结合使用，要注意用prenvent阻止默认行为
item.done = true}
3.修改事项标题
点击事项时，将item赋值给临时变量selItem
通过v-if=”item===selItem“ 如果点击了事项，则显示要修改的文本框，如果没有点击则显示原本的文本框
修改框@blur失去焦点时，点击enter时，执行doUpdate（）
doUpdate（）{
this.selItem ={} //清空数据
}
4.删除事项
del(item){
let index = this.todolist.indexOf(item)
this.todolist.splice(index,1)
},
5.保存到本地存储
1.localStorage.setItem(‘todolist’,JSON.stringify(this.todolist)) //JSON.stringify将js对象转为字符串
2. localStorage.removeItem(‘todolist’) 如果事项删完了，则清空存储
完整
完整
待办事项
<input type=“text” placeholder=“输入代办事项” v-model.trim=“todoItem.title”
@keydown.enter=“add”>
</div>
<div id="content">
<div class="doingList">
<h3>正在进行的事项
<div>{{doingList.length}}件</div>
</h3>
<ul>
<li v-for="item in doingList">
<input type="checkbox" @click.prevent="setDone(item)" >
<input v-if="item ===selItem" type="text" v-model="item.title" @blur="doUpdate" @keydown.enter="doUpdate">
<span v-else @click="setSel(item)">{{item.title}}</span>
<a href="javascript:;" @click.prevent="del(item)">删除</a>
</li>
</ul>
</div>
<div class="doneList">
<h3>已完成的事项
<div>{{doneList.length}}件</div>
</h3>
<ul>
<li v-for="item in doneList">
<input type="checkbox" @click.prevent="setDoing(item)" checked="checked">
<input v-if="item ===selItem" type="text" v-model="item.title" @blur="doUpdate" @keydown.enter="doUpdate">
<span v-else @click="setSel(item)">{{item.title}}</span>
<a href="javascript:;" @click.prevent="del(item)">删除</a>
</li>
</ul>
</div>
<div><a href="javascript:;" @click.prevent="clearAll">清空</a></div>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
todoItem:{
title:'', //事项标题
done:false //事项状态
},
todolist:[], //所有的待办事项
selItem:{}, //当前选中的要编辑对象
},
created(){ //vue对象创建完成时f,读入数据
let items = JSON.parse(localStorage.getItem('todolist'))
this.todolist = items?items:[]
},
computed:{
doingList(){ //正在进行的事项
return this.todolist.filter((item)=>{
return !item.done
})
},
doneList(){ //已经完成的事项
return this.todolist.filter((item)=>{
return item.done
})
}
},
methods:{
add(){
if(this.todoItem.title){
this.todolist.push(this.todoItem)
this.todoItem = {title:'',done:false}
this.mysave()
}
},
setDone(item){ //设置事项的状态为完成
item.done = true
this.mysave() },
setDoing(item){ //设置事项的状态为完成
item.done = false //设置事项的状态为进行状态
this.mysave() },
setSel(item){
this.selItem = item //设置点击的对象为选中对象
},
doUpdate(){ //执行更新
this.selItem ={}
this.mysave() },
del(item){
let index = this.todolist.indexOf(item)
this.todolist.splice(index,1)
this.mysave() },
clearAll(){
this.todolist=[]
// localStorage.setItem('todolist',JSON.stringify(this.todolist))
this.mysave()
},
mysave(){ //保存数据的方法
if(this.todolist.length==0){
localStorage.removeItem('todolist')
}else{
localStorage.setItem('todolist',JSON.stringify(this.todolist))
}
}
}
})
</script>