當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue之小目标列表实现

發布時間：2023/12/14 vue 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue之小目标列表实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?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});//添加后，清空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>

總結

以上是生活随笔為你收集整理的Vue之小目标列表实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。