<div id="app">
<comment-box @func="loadComments"></comment-box>
<!-- 评价列表 -->
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论者:{{ item.user }}</span>
{{ item.content }}
</li>
</ul>
</div>
<!-- <textarea> 标签定义多行的文本输入控件。 -->
<template id="tem1">
<div>
<div class="form-group">
<label>评论人:</label>
<input type="text" class="form-control" v-model="user">
</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="postComment">
</div>
</div>
</template>
var commentBox = {
template: '#tem1',
data() {
return {
content: '',
user: ''
}
},
methods: {
postComment() { //发表评论的方法
var comment = {
id: Date.now(),
user: this.user,
content: this.content
};
//localStorage本质上是对字符串的读取,有json格式时需要JSON.stringify()转化为字符串。
//取出数据:localStorage.getItem()
//若localstorage.getItem('cmts')有值就会返回该值,否则取到的值为null,此时会将null隐式转换为false,返回第二个值[]
//JSON.parse()方法将数据转化为js对象
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(comment);
//储存数据:localStorage.setItem()
//将list列表字符串化,然后赋值给cmts变量
localStorage.setItem('cmts', JSON.stringify(list));
this.user = this.content = '';
//评论保存到本地后,需要触发父组件中的loadComments方法发表出来
this.$emit('func');
}
}
}
var vm = new Vue({
el: '#app',
data: {
list: [
// { id: Date.now(), user: '李白', content: '一剑霜寒十九州' },
// { id: Date.now(), user: '杜甫', content: '一剑霜寒十九州2' },
// { id: Date.now(), user: '李商隐', content: '一剑霜寒十九州3' },
]
},
methods: {
loadComments() {//从本地的localStorage中加载评论列表
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
components: {
'commentBox': commentBox
}
})
</script>