今天我將帶大家通過Vue的todolist案例來完成一個簡易的網頁留言板!
LES'T GO!
首先我們需要在頁面上搭建一個input文本輸入框,並設置提交按鈕,通過循環指令來完成輸入框的信息提交!
具體代碼如下:
<body> <div id="app"> <input type="text" v-model="txt"> <button @click="send_msg">留言</button> <ul> <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li> </ul> </div> </body>
這里的i是索引的值,我們需要設置點擊刪除操作,而留言從第一樓開始往下通過序列展示!
然后我們繼續事件提供實現體,對數據進行渲染
<script> new Vue({ el: '#app', data: { txt: '', // msg_arr: ['初始留言1', '初始留言2'] msg_arr: [] }, methods: { send_msg: function () { // this.txt // this.msg_arr if (this.txt) { this.msg_arr.push(this.txt); this.txt = '' } }, delete_msg: function (index) { this.msg_arr.splice(index, 1) } } }) </script>
這里通過splice對索引進行刪除操作,而文本內容則通過push添加進序列中
具體實現效果如下:
這樣一個簡易的留言展示功能便完成了,如果你覺得很粗糙的話還可以通過樣式對其進行修改,最后可以將這個功能添加到自己的項目中!
整體代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="txt"> <button @click="send_msg">留言</button> <ul> <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app', data: { txt: '', // msg_arr: ['初始留言1', '初始留言2'] msg_arr: [] }, methods: { send_msg: function () { // this.txt // this.msg_arr if (this.txt) { this.msg_arr.push(this.txt); this.txt = '' } }, delete_msg: function (index) { this.msg_arr.splice(index, 1) } } }) </script> </html>