Vue之小目标列表实现
生活随笔
收集整理的這篇文章主要介紹了
Vue之小目标列表实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Vue之小目標(biāo)列表實(shí)現(xiàn)
今天來實(shí)現(xiàn)一個(gè)簡單的小目標(biāo)列表功能。
效果圖：
功能：可以添加目標(biāo)添加后自動(dòng)顯示在最下面，如果勾選了就說明是已完成的目標(biāo)。
1.創(chuàng)建一個(gè)文本框用于添加目標(biāo)。并綁定鍵盤回車事件@keyup.13='addList' 調(diào)用添加目標(biāo)方法。文本框的值則綁定addText data屬性。
2.實(shí)現(xiàn)添加目標(biāo)方法。把輸入的值添加到集合中，狀態(tài)默認(rèn)為未完成。用this.prolist.push來添加集合的子項(xiàng)。
3.寫兩個(gè)計(jì)算方法，用來計(jì)算已完成的目標(biāo)和未完成的目標(biāo)。直接用this.prolist.filter過濾掉相應(yīng)的狀態(tài)即可。
全部代碼：
<!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>小目標(biāo)列表</h1><h2>添加一個(gè)小目標(biāo)</h2><input type="text" name="" placeholder="添加小目標(biāo)" v-model="addText" @keyup.13='addList'/><h3>共有{{prolist.length}}個(gè)目標(biāo)，已完成{{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-完成狀態(tài)prolist:[{name:"HTML5",status:false},{name:"css3",status:false},],//success:[],},methods:{addList :function(){this.prolist.push({name:this.addText,status:false});//添加后，清空addTextthis.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>?
總結(jié)
以上是生活随笔為你收集整理的Vue之小目标列表实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 闭关修炼（十八）maven
- 下一篇： Vue SPA工作原理