一.增加数据：
1.首先一定要导入vue.js，因为我是vue.js放在JS文件夹下，所以引用他的路径即可，我一般引用路径放在头部；
<script src="JS/Vue.js"></script>2.原理： <input type="text" v-model="msg">--------------》添加按钮--------------》把添加的数据填充到li标签遍历
<body>
<div id="box">
<ul>
<li v-for="item in arr">
<input type="checkbox">{{item.dec}}</input>
</li>
</ul>
<div>
<input type="text" v-model="msg">
<button v-on:click="fn1()">添加</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
msg:'',
arr:[{dec:"吃饭",bol:false},{dec:"睡觉",bol:false},{dec:"打豆豆",bol:false}]
},
methods:{
fn1:function(){
this.arr.push({dec:this.msg,bol:false})
}
}
})
</script>二.增加+删除数据
原理:添加数据完后-------》点击复选框按钮-------》点击后会触发，将bol=false变为true,触发类选择器，改变他的样式，然后点击删除直接删除
<body>
<div id="box">
<h1>任务列表</h1>
<p><span>总任务10,</span><span></span>已完成{{fn2()}}<span class="span">删除</span></p>
<ul style="list-style:none">
<li v-for="item in arr" v-bind:class="{finish:item.bol}">
<div>
<input type="checkbox" v-model="item.bol" v-on:click="fn2()">{{item.dec}}</input>
</div>
</li>
</ul>
<div>
<input type="text" v-model="msg">
<button v-on:click="fn1()">添加</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
msg:'',
arr:[{dec:"吃饭",bol:false},{dec:"睡觉",bol:false},{dec:"打豆豆",bol:false}]
},
methods:{
fn1:function(){
this.arr.push({dec:this.msg,bol:false})
},
//双向绑定，当点击复选框按钮时，false--true,
fn2:function(){
var num=0;
this.arr.forEach(function(item){
if(!item.bol){
num++;
}
})
return num;
}
}
})
</script>
</body>三.增+删+改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.span{
color:skyblue;
}
.finish{
text-decoration: line-through;
color: #ccc;
}
</style>
<script src="JS/Vue.js"></script>
</head>
<body>
<div id="box">
<h1>任务列表</h1>
<p><span>总任务10,</span><span></span>已完成{{fn2()}}<span class="span" v-on:click="fn3()">删除</span></p>
<ul style="list-style:none">
<li v-for="(item,index) in arr" v-bind:class="{finish:item.bol}">
<div v-if="item.flag">
<input type="checkbox" v-model="item.bol" v-on:click="fn2()">
<span v-on:click="fn4(index)">{{item.dec}}</span>
</input>
</div>
<input type="text" v-else v-model="item.dec" v-on:blur="fn5(index)">
</li>
</ul>
<div>
<input type="text" v-model="msg">
<button v-on:click="fn1()">添加</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
msg:'',
arr:[{dec:"吃饭",bol:false,flag:true},{dec:"睡觉",bol:false,flag:true},{dec:"打豆豆",bol:false,flag:true}]
},
methods:{
fn1:function(){
this.arr.push({dec:this.msg,bol:false})
},
fn2:function(){
var num=0;
this.arr.forEach(function(item){
if(!item.bol){
num++;
}
})
return num;
},
fn3:function(){
for(var i=0;i<this.arr.length;i++){
if (this.arr[i].bol) {
this.arr.splice(i,1);
i--;
}
}
},
fn4:function(indexs){
this.arr[indexs].flag=false;
},
fn5:function(indexs1){
this.arr[indexs1].flag=true;
}
}
})
</script>
</body>
</html>