Vue.js实现简易的todolist列表
我们可以利用vue做一个简易的列表清单。要求如下：
1、在文本框内输入内容 回车后 可以添加一条数据在下面;
2、点击每行列表出现中杠线;
3、点击X可以清除一条;
4、点击“删除全部” 按钮 可以清除勾选的列表;
5、全部删除后，出现“暂无数据”的提示;
如下面的图片所示:
image.png
image.png
image.png
通过下面的代码段可以实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todolist实现</title>
<style type="text/css">
body{
/* 清除body的默认样式 */
padding: 0;
margin: 0;
}
.del{
text-decoration: line-through;
}
</style>
<script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="thing" @keyup.13="add">
<hr>
<button @click="delAll">删除全部</button>
<div v-if="!dos.length">暂无数据</div>
<ul v-else>
<li v-for="(item,index) in dos" :class="{del:item.isDel}" @click="change(index)">{{item.thing}}
<span v-show="item.isDel" @click.stop="delLi(index)">X</span>
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
thing:"", //添加的文本
dos:[{
thing:"打篮球", //默认的值
isDel:false //是否删除标记
}]
},
methods: {
//在这里添加相关事件和方法
add(){
this.dos.push({
thing:this.thing,
isDel:false
});
this.thing="";
},
change(i){
//(!this.dos[i].isDel取相反的状态，如果等号前面的条件为false 则为true)
this.dos[i].isDel= !this.dos[i].isDel;
},
delLi(i){
this.dos.splice(i,1);
},
delAll(){
//this.dos=[];//全部清除(这种写法不太合理，建议还是用下面的循环)
for(let i=0;i<this.dos.length;i++){
//判断有中间勾线的就删除
if(this.dos[i].isDel){
this.dos.splice(i,1);
i--;
}
}
}
}
})
</script>
</body>
</html>
