vue中评论组件

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对象

希望能帮到大家！