vue学习笔记：6.4.组件案例-评论列表

组件案例-评论列表

这里使用的 bootstrap 做布局
效果图如下：

HTML

<div id="app">
<!-- locadComments 为父组件中的方法名 -->
<cmt-box @func="locadComments"></cmt-box>
<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">
<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" class="btn btn-primary" value="发表评论" @click="postComment">
</div>
</div>
</template>

JS

var commentBox = {
data() {
return {
user: "",
content: ""
}
},
template: "#tmpl",
methods: {
postComment() {     //发表评论的方法
// 分析：
// 1.组织出一个最新的评论数据对象
// 2.评论数据存储到 localStorage 中
//  2.1 localStorage 只支持存放字符串数据，要先调用 JSON.stringify
//  2.2 载保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数据（string），转换为一个数组对象，然后把最新的评论push进去
//  2.3 如果获取到的 localStorage 中的 评论字符串 为空，则 可以返回一个 "[]"， 让 JSON.parse 去转换
//  2.4 把最新的评论列表数组，再次调用 JSON.stringify 转为数组字符串，然后调用 localStorage.setItem()

if(this.user != "" && this.content != "") {
var comment = { id: Date.now(), user: this.user, content: this.content };
// console.log(comment);
// 从 localStorage 中获取所有评论
var list = JSON.parse(localStorage.getItem("cmts") || "[]");
list.unshift(comment);  // unshift 在数组最上面添加
console.log(list);

// 重新保存 最新的 评论数据
localStorage.setItem("cmts", JSON.stringify(list));

this.user = this.content = "";
this.$emit("func");
}
}
},
}

var vm = new Vue({
el: '#app',
data: {
list: [
{ id: Date.now(), user: "张三", content: "五百里滇池，奔来眼底" },
{ id: Date.now(), user: "李四", content: "披襟岸帻，喜茫茫空阔无边" },
{ id: Date.now(), user: "王五", content: "看：东骧神骏，西翥领仪" },
{ id: Date.now(), user: "马六", content: "北走蜿蜒，南翔缟素" },
]
},
components: {
"cmt-box": commentBox
},
created() {
this.locadComments();
},
methods: {
locadComments() {   //从本地的 localStorage 中，加载评论列表
var list = JSON.parse(localStorage.getItem("cmts"));
this.list = list;
}
}
});
</script>