vue获取内存中的值并写入

Posted 2020-12-05 lskzj

<template>
    <div class="container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入" maxlength="120" v-model="content"></textarea>
        <mt-button type="primary" size="large" @click="postComments">发表评论</mt-button>
        <div class="cmtlist" v-for="(item,i) in list" :key="item.id">
            <div class="cmtitem">
                <div class="cmttitle">第{{i+1}}楼&nbsp;&nbsp;匿名用户&nbsp;&nbsp;发表时间:{{item.id|dateFormat}}</div>
                <div class="cmtbody">{{item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>
    
</template>
<script>
export default{
    data(){
        return {
            user:‘‘,
            content:‘‘,
            list:[{id:1,user:‘李白‘,content:‘天生我材必有用‘},],
        }
    },
    methods:{
        loadComments(){
            var list = JSON.parse(localStorage.getItem(‘cmts‘)||‘[]‘)
            this.list= list
        },
        postComments(){
            var comment = {id:Date.now(),user:‘user111‘,content:this.content}
            var list = JSON.parse(localStorage.getItem(‘cmts‘)||‘[]‘)
            list.unshift(comment)
            localStorage.setItem(‘cmts‘,JSON.stringify(list))
            this.content=‘‘
            this.loadComments()
        },
        
    },
    created(){
        this.loadComments()
    }
}
</script>
<style>
.container h3{
    font-size: 18px;
}
textarea{
    font-size:14px ;
    height: 85px;
    margin: 0;
}
.cmtlist{
    margin: 10px 0;
}
.cmttitle{
    background-color: #ccc;
    line-height: 30px;
}
.cmtitem{
    font-size: 13px;
}
.cmtbody{
    line-height: 35px;
    text-indent: 2em;
}
</style>