评论列表练习（前端保存，刷新页面后仍存在）
评论列表练习
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论列表</title>
<script src="../js/vue-2.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/>
</head>
<body>
<div id="app">
<!--如果组件命名时，使用了驼峰命名法，则引用组件时要使用中划线-->
<com-msg @func="getContent"></com-msg>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人： {{ item.name }}</span>
{{ item.content }}
</li>
</ul>
</div>
<template id="temp">
<div>
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" v-model="name">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postContent">
</div>
</div>
</template>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
list: [
]
},
created() {
//调用方法
this.getContent();
},
methods: {
getContent() {
//获取localStorage中的数组
let conList = JSON.parse(localStorage.getItem("msg") || "[]");
this.list = conList;
}
},
components: {
comMsg: {
template: "#temp",
data() {
return {
name: "",
content: ""
}
},
methods: {
postContent() {
//1. 用接收表单的值构造对象
let obj = {id: Date.now(),name:this.name,content:this.content}
//2. 从localstorage中获得对象数组。但是，localstorage中只能存储字符串。JSON.parse()
let list = JSON.parse(localStorage.getItem("msg") || "[]");
//3. 把对象添加到本地存储localStorage中的数组里
list.unshift(obj);
//4. 把对象数组保存到localstorage中。JSON.stringify()
localStorage.setItem("msg", JSON.stringify(list));
this.name = this.content = '';
//5. 调用getContent刷新列表
this.$emit("func");
}
}
}
}
});
</script>
</body>
</html>
