<!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>Document</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/vue/dist/vue.min.js"></script>
<style>
.del{
text-decoration: line-through;
color:#3984FF;
}
</style>
</head>
<body>
<div id="demoDiv">
<div class="container">
<h2>任务列表</h2>
<p>任务总数 {{obj.length}} ,还有{{nux}}未完成 <a href="#" @click="del()">【完成】</a></p>
<ul style="list-style: none;">
<!-- 动态创建li -->
<!-- 通过style来改变选中的样式 -->
<li style="margin-left:-20px;" v-for="(v,i) in obj" v-bind:class="v.style?'del':''">
<!-- 需要用一个变量来保存，然后把那个变量绑定到复选框上 -->
<input type="checkbox" v-model="v.style" >
<!-- 用v-if来判断到底显示哪一个，通过点击事件改变edit的布尔值 -->
<span v-if="!v.edit" @click="inputList(i)">{{v.title}}</span>
<!-- 修改span的input框 ，通过光标离开事件改变edit的布尔值来改变数据-->
<input type="text" v-else @blur="inputList(i)" v-model="v.title">
</li>
</ul>
<input type="text" v-model="text"><button @click="add()">添加</button>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"",
//给原始数据添加一个变量来保存当前状态
obj:[
{title:"吃饭",edit:false,style:false},
{title:"睡觉",edit:false,style:false},
{title:"听歌",edit:false,style:false},
{title:"看书",edit:false,style:false}
]
},
methods:{
// 添加数据
add(){
this.obj.push({title:this.text,edit:false,style:false});
this.text="";
},
// 创建切换的函数
inputList(i){
//判断用户是否在输入框中输入了 内容，没有可以修改，有内容就不能修改
if(this.obj[i].style){
return;
}else{
this.obj[i].edit=!this.obj[i].edit;
}
},
//点击完成删除
del(){
//先把所有的数据赋值给一个新的变量
var arr=this.obj;
// 在把原来的数据全部清空
this.obj=[];
// 在判断数据中心的style属性是否为假
for(var i=0;i<arr.length;i++){
if(!arr[i].style){
// 在把为假的数据push到便利的那个旧数据中
this.obj.push(arr[i]);
};
}
}
},
computed:{
//计算未完成的数量
nux:function(){
let num =0;
for(let j in this.obj){
if(!this.obj[j].style){
num++;
}
}
return num;
}
}
});
</script>
</body>
</html>
