zoukankan      html  css  js  c++  java
  • vue获取内存中的值并写入

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

  • 相关阅读:
    迭代器简介
    关于判断对象是否相等的问题
    NIO
    BIO流分类介绍
    servlet简介
    http协议简介
    爬虫常用链接
    http和https协议
    爬虫的合法性研究
    爬虫介绍
  • 原文地址:https://www.cnblogs.com/lskzj/p/9339016.html
Copyright © 2011-2022 走看看