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

vue

Vue实现简易备忘录

發布時間：2024/1/18 vue 27 豆豆

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

簡介：本文旨在結合具體項目，讓用戶學會vue的button組件與個事件怎么結合。

初始代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例備忘錄</title><script src="../js/vue.js"></script> </head> <body><div id="app">請輸入內容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到備忘錄</button><br><ul><li v-for="(content, index) in lists" :key="index">{{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">刪除</a></li> </ul><a href="javascript:;" @click="clearAll()">清空備忘錄</a><h3>當前備忘錄3條</h3></div> </body><script>const app = new Vue({el:"#app",data:{lists:["今天上午交報名費","晚上要復習高等數學","后天有培訓"] // 這個數組沒有value值},methods:{}});</script> </html>

設計要求：
在methods中添加三個方法，分別完成如下功能：

點擊”添加到備忘錄“按鈕，能夠將文本框中輸入的項目添加到列表。方法名：saveItem()

提示：這需要給這個按鈕添加綁定一個單擊事件。在此事件的處理函數中需要將文本框
的value交給v-model處理。同時思考如何用Javascript對數組進行增加和刪除元素操作。

點擊列表中項目名稱后的”刪除“，能夠將此條目刪除掉。方法名：deleteItem()
提示：將v-for的index傳遞給你所寫的刪除函數，這樣就得到了要刪除的那個元素的index。
點擊”清除備忘錄“，列表中的所有條目都被刪除掉。方法名：clearAll()

隨著添加或刪除操作，顯示的總條數能夠隨之變化。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例備忘錄</title><script src="../js/vue.js"></script> </head> <body><div id="app">請輸入內容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到備忘錄</button><br><ul><li v-for="(content, index) in lists" :key="index">{{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">刪除</a></li> </ul><a href="javascript:;" @click="clearAll()">清空備忘錄</a><h3>當前備忘錄{{lists.length}}條</h3></div> </body><script>const app = new Vue({el:"#app",data:{lists:["今天上午交報名費","晚上要復習高等數學","后天有培訓"] // 這個數組沒有value值},methods:{saveItem(){// 通過ref實現獲取input中的內容// this.lists.push(this.$refs.textvalue.value)// 通過v-model實現獲取input中的內容this.lists.push(this.textvalue)},deleteItem(index){this.lists.splice(index, 1);},clearAll(){this.lists.splice(0, this.lists.length)}}});</script> </html>

總結

以上是生活随笔為你收集整理的Vue实现简易备忘录的全部內容，希望文章能夠幫你解決所遇到的問題。

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