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