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