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

敲代码的小吉米

已于 2022-09-24 15:47:05 修改

阅读量444

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

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

本文链接：https://blog.csdn.net/promise466/article/details/127025468

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

留言板思路

// 把对象添加到数组的最前面 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>