html
<div class="comment-box">
<ul>
<li v-for="(item,index) in list" :key="index">
{{item.content}}
<span class="badge">评论人:{{item.user}}</span>
</li>
</ul>
<div>
<div class="">
<label>评论人:</label>
<input type="text" v-model="user">
</div>
<div class="">
<label>评论内容:</label>
<textarea type="text" v-model="content"></textarea>
</div>
<div class="">
<input type="button" value="发表评论" @click="post">
</div>
</div>
</div>
JS
name: 'this-is-comment',
data() {
return {
list: [],
user:"",
content:""
}
},
created (){
this.loadComments();
},
methods:{
post(){
//获取绑定的对象
var comment = {id:Date.now(),user:this.user,content:this.content}
//获取指定key本地存储的值并且把字符串转换为对象
var list = JSON.parse(localStorage.getItem("cmts") || "[]")
//添加在数组的最前面
list.unshift(comment)
//将value存储到key字段
localStorage.setItem("cmts",JSON.stringify(list))
//储存后使文本框内容清除
this.user = this.content=''
//调用方法使自动刷新
this.loadComments();
},
loadComments(){
var list = JSON.parse(localStorage.getItem("cmts") || "[]")
this.list = list
}
}
}
*暂时还没有加css样式
localStorage实现本地存储,避免刷新页面数据丢失
其中localStorage.setItem :将value存储到key字段
localStorage.getItem:获取指定key本地存储的值
JSON.stringify():将obj对象转换为字符串
还有JSON.parse() :将字符串转换为obj对象
希望能帮到大家!