版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83096747
引入文件:bootstrap.css
html
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<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="tmp1">
<div>
<div class="form-group">
<label for="user">评论人:</label>
<input type="text" id="user" class="form-control" v-model="name">
</div>
<div class="form-group">
<label for="connect">评论内容:</label>
<input type="text" id="connect" class="form-control" v-model="content">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
</div>
</div>
</template>
js
let commentBox = {
template: '#tmp1',
data() {
return {
name: '',
content: ''
}
},
methods: {
postComment() {
//发表评论的方法
// 1.评论存放进 localStorage 中 localStorage.setItem('','')
// 2.先组织出一个最新的评论数据对象
// 3.想办法,把第二步中,得到的评论对象,保存到 localStorage 中;
// 3.1.localStorage 只支持存放字符串数据,要先调用 JSON.stringify
// 3.2.在保存最新的评论数据之前,要先从 localStorage 获取到之前的评论数
// 据(string),转换为一个数组对象,然后,把最新的评论,push 到这个数组
// 3.3.如果获取到的 localStorage 中的评论字符串,为空不存在,
// 则可以返回一个 '[]' 让 JSON.parse 去转换
// 3.4.把最新的评论列表组,再次调用 JSON.stringify 转为数组字符串,
// 然后调用 localStorage.setItem()
let comment = {id: Date.now(), name: this.name, content: this.content};
// 从 localStorage 中获取所有的评论
let list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(comment);
// 重新保存最新的评论数据
localStorage.setItem('cmts', JSON.stringify(list));
this.name = this.content = '';
this.$emit('func');//触发这个事件
}
}
};
let vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
loadComments() {
//从本地的 localStorage 中,加载评论列表
this.list = JSON.parse(localStorage.getItem('cmts') || '[]');
}
},
components: {
cmtBox: commentBox
},
created() {
this.loadComments();
},
});