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>