Vue之小目标列表实现
今天来实现一个简单的小目标列表功能。
效果图：
功能：可以添加目标添加后自动显示在最下面，如果勾选了就说明是已完成的目标。
1.创建一个文本框用于添加目标。并绑定键盘回车事件@keyup.13='addList' 调用添加目标方法。文本框的值则绑定addText data属性。
2.实现添加目标方法。把输入的值添加到集合中，状态默认为未完成。用this.prolist.push来添加集合的子项。
3.写两个计算方法，用来计算已完成的目标和未完成的目标。直接用this.prolist.filter过滤掉相应的状态即可。
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
</style>
<script src="vue.min.js"></script>
<body>
<div id="test">
<h1>小目标列表</h1>
<h2>添加一个小目标</h2>
<input type="text" name="" placeholder="添加小目标" v-model="addText" @keyup.13='addList'/>
<h3>共有{{prolist.length}}个目标，已完成{{getSuccess.total}},还有{{getUnSuccess.total}}未完成</h3>
<ul>
<li v-for="item in prolist"><input type="checkbox" v-bind:checked="item.status" @click="item.status=!item.status"/>
<span>{{item.name}}</span>
</li>
</ul>
</div>
</body>
<script >
new Vue({
el : "#test",
data: {
addText:'',
//name-名称,status-完成状态
prolist:[
{name:"HTML5",status:false},
{name:"css3",status:false},
],
//success:[],
},
methods:{
addList :function(){
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
}
},
computed :{
getSuccess:function(){
var succ = this.prolist.filter(function (val) { return val.status})
return {total:succ.length}
},
getUnSuccess:function(){
var succ = this.prolist.filter(function (val) { return !val.status})
return {total:succ.length}
}
}
})
</script>
</html>