使用Vue實現todolist案例，如有不對敬請大佬多多指教
功能：
1、增加功能：在新增版塊里面的輸入框內輸入數據，點擊后面的“添加”按鈕，將輸入的數據添加到列表中，默認是未完成的
2、點擊列表里面每一項后面的“完成”按鈕，完成按鈕會消失並且文字會出現刪除線
3、在操作版塊點擊按鈕，進行切換列表，在完成列表里面只顯示已經完成的事項，在未完成的列表里面只顯示未完成的事項
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>標題</title> </head> <style> * { margin: 0; padding: 0; } li { list-style: none; font-size: 16px; line-height: 26px; } .add { width: 100%; height: 100px; border: 3px solid #123; box-sizing: border-box; } .list { width: 100%; border: 3px solid #709; margin-top: 30px; margin-bottom: 30px; padding-bottom: 20px; padding-left: 20px; box-sizing: border-box; } .oper { display: flex; width: 100%; height: 40px; border: 3px solid #700; box-sizing: border-box; } .oper button { margin-left: 20px; padding: 5px } h2 { font-size: 20px; line-height: 26px; color: rgb(18, 87, 238); margin: 10px } input { margin-right: 20px } .act { background-color: rgb(213, 0, 0); color: aliceblue } .under { text-decoration: line-through; } </style> <body> <div id='app'> <div class="add"> <h2>新增</h2> <!-- 用戶輸入框 實現雙向數據綁定--> <input type="text" v-model='value'> <!-- 添加按鈕，點擊這個按鈕，數據會進行添加 --> <button @click="addLIstData">添加</button> </div> <ul class="list"> <h2>列表</h2> <!-- 使用循環指令，對需要展示的數據進行循環 --> <!--每一個數據都是一個對象，對象里面具有三個值，分別是id唯一值 value顯示的數據 isTodo是否完成 --> <li v-for="item in showList" :key="item.id"> <!-- 顯示列表數據 --> <!-- 綁定class，表達式成立進行顯示--> <span :class="{under:item.isTodo == 'true'}"> {{item.value}} </span> <!-- 對按鈕添加點擊事件並將這一個數據的id進行傳遞 --> <!-- 對按鈕添加v-if判斷，如果這項數據完成了就去掉按鈕 --> <button v-if="item.isTodo == 'false' " @click="finish(item.id)"> 完成 </button> </li> </ul> <div class="oper"> <h2>操作</h2> <!-- 切換列表的按鈕 --> <!-- 三個切換按鈕使用數組進行存儲，每一項都是一個對象，對象里面具有兩個值，分別是 btn按鈕上顯示的內容 id唯一值 --> <!-- 對每一個按鈕添加點擊事件，並傳遞這個按鈕的唯一值 --> <button v-for="item in oper" @click="cutList(item.id)" :class="{act:item.id === selected}"> {{item.btn}} </button> </div> </div> </body> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> <script> // 創建Vue實例 new Vue({ // 綁定區域 el: '#app', // 創建數據 data: { // 顯示列表 showList:[], // 所有的數據的列表，用戶添加的數據會直接到達這里 addList:[], // 輸入框雙向數據綁定 value:'請輸入數據', // 操作按鈕上的數據 oper:[ { btn: "所有", id: 'all' }, { btn: "完成", id: 'true' }, { btn: "未完成", id: 'false' }, ], // 點擊的那個操作按鈕，默認情況下所有 selected: 'all' }, // 添加方法 methods:{ //添加按鈕的方法 addLIstData(){ // 將用戶輸入的內容插入到addList列表中 this.addList.push({ id:new Date().getTime(),//數據的唯一值設置成時間戳 value:this.value,//用戶輸入的數據 isTodo:'false'//默認是未完成的 }) // 最后將輸入框內的數據進行清空 this.value = '' // 修改玩數據之后對列表重新渲染 this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected)) }, // 完成按鈕的方法 finish(id){ // 接受一個參數表示操作哪一個數據 // 通過查找id確定操作的是第幾個 const index = this.showList.findIndex(item => item.id === id) // 查找到之后將這一個的isTodo盡心更改 this.showList[index].isTodo = 'true' // 修改玩數據之后對列表重新渲染 this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected)) }, // 切換列表的按鈕的方法 cutList(id){ // 接受一個參數，確定是點擊的哪一個 // 將存儲點擊按鈕的數據進行更改 this.selected = id // 對列表進行操作 this.showList = this.addList.filter(item => (id == 'all' || item.isTodo == id)) } }, }) </script> </html>
此代碼在設置列表的時候使用了三次，造成了一定的內存浪費，可以通過計算屬性進行更改優化
將每一個方法里面的“修改玩數據之后對列表重新渲染”，進行刪除，將其寫在計算屬里面，並且將數據里面的“showList”刪除。
需要注意的是在計算屬性中需要使用return進行返回
Vue示例代碼如下
// 創建Vue實例 new Vue({ // 綁定區域 el: '#app', // 創建數據 data: { // 顯示列表 // showList:[],//此處刪除 // 所有的數據的列表，用戶添加的數據會直接到達這里 addList: [], // 輸入框雙向數據綁定 value: '請輸入數據', // 操作按鈕上的數據 oper: [{ btn: "所有", id: 'all' }, { btn: "完成", id: 'true' }, { btn: "未完成", id: 'false' }, ], // 點擊的那個操作按鈕，默認情況下所有 selected: 'all' }, // 添加方法 methods: { //添加按鈕的方法 addLIstData() { // 將用戶輸入的內容插入到addList列表中 this.addList.push({ id: new Date().getTime(), //數據的唯一值設置成時間戳 value: this.value, //用戶輸入的數據 isTodo: 'false' //默認是未完成的 }) // 最后將輸入框內的數據進行清空 this.value = '' // 修改玩數據之后對列表重新渲染 // this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))//此處刪除 }, // 完成按鈕的方法 finish(id) { // 接受一個參數表示操作哪一個數據 // 通過查找id確定操作的是第幾個 const index = this.showList.findIndex(item => item.id === id) // 查找到之后將這一個的isTodo盡心更改 this.showList[index].isTodo = 'true' // 修改玩數據之后對列表重新渲染 // this.showList = this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected))//此處刪除 }, // 切換列表的按鈕的方法 cutList(id) { // 接受一個參數，確定是點擊的哪一個 // 將存儲點擊按鈕的數據進行更改 this.selected = id // 對列表進行操作 // this.showList = this.addList.filter(item => (id == 'all' || item.isTodo == id))//此處刪除 } }, // 添加計算屬性 computed: { // 需要計算的數據 showList() { // 一定要注意返回 return this.addList.filter(item => (this.selected == 'all' || item.isTodo == this.selected)) } } })