今天我将带大家通过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>