使用Vue 2.0+本地储存，留言板

原创已于 2022-09-24 15:47:05 修改 · 532 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-24 15:07:22 首次发布

Vue 专栏收录该内容

15 篇文章

订阅专栏

这个博客展示了如何使用Vue.js构建一个简单的留言板应用。应用实现了数据与表单的双向绑定，通过`v-model`指令将用户输入与界面上的显示保持同步。用户可以输入用户名和留言，点击提交后，留言会添加到列表的最前面，并显示时间戳。同时，应用支持从本地存储中读取和保存留言，以便页面刷新后仍能保留数据。此外，还提供了删除留言的功能。代码中详细注释了解析思路，包括数据绑定、本地存储的使用等关键步骤。

留言板思路

// 把对象添加到数组的最前面 unshift

// 数据与表单进行绑定 v-model

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../js/vue.js"></script>
</head>

<body>
	<div id="app">
		<h1>留言板</h1>
		<!-- 输入留言的区域 -->
		<div>
			<!-- v-model进行双向绑定 -->
			<input type="text" placeholder="用户名" v-model="temp.name">
			<textarea placeholder="留言内容" v-model="temp.msg"></textarea> <br>
			<button @click="send()">提交留言</button>
		</div>
		<!-- 获取留言板的信息 -->
		<div class="list">
			<!-- v-for遍历list -->
			<div class="item" v-for="(item,index) in list" :key="index">
				<hr>
				<h4>{{item.name}}-{{item.data}}</h4>
				<span>{{item.msg}}</span>
				<button @click="delItem(item)"> X</button>
			</div>
		</div>
	</div>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					temp: { // 存放用户名和文本框的数组 
						name: "",
						msg: ""
					},

					// list:[{name:"李磊",msg:"我想吃烤红薯"}], //list存放留言的数组
					list: JSON.parse(localStorage.getItem("list") || "[{name:'李磊',msg:'我想吃烤红薯'}]")  //将留言信息进项本地存储
				}
			},
			methods: {
				send() {
					// 发表的留言
					this.list.unshift({
						name: this.temp.name,
						msg: this.temp.msg,
						//new Date() 创建一个新的时间 toLocaleString 把时间转换为本地格式字符串
						data: new Date().toLocaleString()
					});
					// 清空文本框
					this.temp = {
						name: "",
						msg: ""
					};
					// 添加时进行本地储存
					localStorage.setItem("list", JSON.stringify(this.list))
				},

				delItem(item) {//删除方法
					var ind = this.list.indexOf(item);
					this.list.splice(ind, 1);
					//删除时进行本地储存
					localStorage.setItem("list", JSON.stringify(this.list))
				}
			}

		})
			// 思路解析
			// 把对象添加到数组的最前面  unshift
			// 数据与表单进行绑定 v-model
        // 1  数据和表单绑定 v - model
		// 2  本地存 localStorage.setItem(key, value)
		// 3  取 localStorage.setItem(key)
		// 4  删 localStorage.removeItem(key)
		// 5 存的数据必须是字符串，取出来的字符串转换为js对象
		// 6 JSON.stringify(obj) js对象转换为字符串
		// 7 什么时候取 一开始就取
		// 8 什么时候存 增加，删除再存
	</script>
</body>

</html>