Vue实现todolist功能
程序员文章站
2022-07-01 19:10:44
...
学习感悟：与原生JS不同，Vue完全是数据驱动的一个JS框架，即所有页面的改动，都要考虑如何与数据绑定并且如何去操作数据，从而改变页面的视图。而且Vue是一个MVVM框架。
todolisit实现功能
完成任务的添加 删除 编辑等功能，以及已完成 未完成任务的分开，利用Vue里面的component函数，注册todolist组件，然后在html中引用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="file:///D|/前端/vue.js"></script>
<link rel="stylesheet" type="text/css" href="todo.css">
</head>
<body>
<div id ="root">
<to-do></to-do>
</div>
<script src="to-do list zujian.js"></script>
<script >
new Vue ({
el:"#root"
})
</script>
</body>
</html>思路：如果页面有动态变化，就要考虑如何去绑定数据。用v-model来进行数据的双向绑定， 列表的数据可以将其存在一个数组中，然后用v-for指令来渲染到<ul><li></li></ul>中；此外还用了localStorage来存储输入数据，使得页面刷新时数据依旧存在。
代码如下：
Vue.component("to-do",{
template:`
<div class="box">
<div class="input">
<input type="text" placeholder="请输入事项" v-model="text" @keyup.13="add">
</div>
<div class="btns">
<input type="button" value="全部" @click="changeStatus('all')" :class="{check:status=='all'}">
<input type="button" value="未完成" @click="changeStatus('0')" :class="{check:status=='0'}">
<input type="button" value="已完成" @click="changeStatus('1')" :class="{check:status=='1'}">
</div>
<ul class="lists">
<li v-for="item in datas">
<div v-if="item.edit==true">
<span class="opt" @click="changeState(item)" :class="{red:item.state==1}"></span>
<p @dblclick="edit(item)">
{{item.text}}
</p>
<span class="del" @click="del(item.id)">删除</span>
</div>
<div v-else>
<input type="text" v-model="item.text" @blur="edit(item)"><!--失去焦点 -->
</div>
</li>
</ul>
<div v-show="all.length==0">没有数据</div>
</div>
`,
data:function(){ //在组件中数据必须是函数
return {
all:localStorage.todo?JSON.parse(localStorage.todo):[],
text:"",
status:"all"
}
},
methods:{
add(){ //输入的文本生成一个对象，方便识别各个文本以及完成状态
var obj={};
obj.text=this.text;
if(!obj.text){
alert("请输入内容");
return;
}
obj.id=Math.random()+new Date().getTime();//生成随机ID
obj.state=0;//0表示未完成 1表示已完成
obj.edit=true;
this.all.push(obj);
this.text="";
localStorage.todo=JSON.stringify(this.all);//将数据变为字符串存储在localstorage中
},
changeStatus(val){ //改变全局信息状态
this.status=val;
} ,
changeState(obj){ //改变当前信息状态
if(obj.state==0){
obj.state=1;
}
else{
obj.state=0;
}
localStorage.todo=JSON.stringify(this.all);
},
del(id){ //删除
this.all= this.all.filter(function(obj){
if(obj.id!=id){
return obj;
}
})
localStorage.todo=JSON.stringify(this.all);
},
edit(item){ //编辑
item.edit=!item.edit;
localStorage.todo=JSON.stringify(this.all);
},
},
computed:{ //此语句尚未完全理解。。。
datas:function(){
return this.all.filter((obj)=>{ //在all中筛选出obj
if(this.status=="all")
{return obj;}
else{
if(this.status==obj.state){
return obj;
}
}
})
}
}
})上一篇： vue中的slot插槽
下一篇： todolist