<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head> <body> <div id="app">
<comment @func="loadComments"></comment>
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in list" :key="index">
<span class="badge">评论人:{{ item.user }}</span>
{{ item.content }}
</li>
</ul> </div> <!-- 模板 -->
<template id="tmpl">
<div>
<div class="form-group form-inline">
<label for="">评论人：</label>
<input type="text" v-model="user" class="form-control">
</div> <div class="form-group form-inline">
<label for="">评论内容：</label>
<textarea v-model="content" name="" id="" cols="30" rows="10" class="form-control"></textarea>
</div> <div class="form-group form-inline">
<input type="button" class="btn btn-primary" @click="postComment" value="发表评论">
</div>
</div>
</template> <script>
var commentBox = {
data(){
return {
user : '',
content : ''
}
},
template: '#tmpl',
methods: {
postComment(){ //发表评论的方法
// 分析 发表评论的业务逻辑
// 1，评论数据放到 localStorage 中
// 2, 先组装一个最新的评论数据对象
// 3, 想办法把第二步中得到的评论对象保存到localStorage中
// 3.1 localStorage中只支持存放字符串，要先调用 JSON.stringify
// 3.2 在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）转换为一个数组对象。
//然后把最新的评论 push 到这个数组。(解决如果键相同值会覆盖的问题)
// 3.3 如果获取 localStorage中的评论字符串为空不存在，则可以返回一个 '[]' ,让JSON.parse转换
// 3.4 把最新的评论数组再次调用 JSON.stringify 转为数组字符串，然后调用localStorage.setItem()
var comment = { id : Date.now() , user : this.user , content : this.content };
//从localStorage中获取所有评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
// list.push(comment);
list.unshift(comment);
//重新保存最新的评论数据
localStorage.setItem('cmts',JSON.stringify(list));
this.$emit('func');
this.user = this.content = '';
}
},
} var vm = new Vue({
el: '#app',
data: {
list: [{
id: Date.now(),
user: '李白',
content: '天生我才必有用'
},
{
id: Date.now(),
user: '江小白',
content: '劝君更尽一杯酒'
},
{
id: Date.now(),
user: '小马',
content: '我姓马，马云的马'
},
]
},
created() { //在创建的时候就调用加载函数。
this.loadComments();
},
methods: {
loadComments(){ //从本地的localStorage中加载列表
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
components: {
comment: commentBox
}
})
</script>
</body> </html>
