vue---评论列表实例

最新推荐文章于 2024-06-23 09:43:47 发布

scwMason

最新推荐文章于 2024-06-23 09:43:47 发布

阅读量921

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/scwMason/article/details/89068648

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

目的

熟练父组件跟子组件之间的传递以及localStorage的使用

代码

<body>
    <div id="app">
        <cmt-box @func='loadComments'></cmt-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">USER: {{item.user}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>
    <template id="tmp1">
        <div>
            <div class="form-group">
                <label for="">评论人:</label>
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label for="">评论内容:</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
           <div class="form-group">
                <input type="button" value="submit" class="btn btn-primary" @click="postComment">
           </div>
        </div>
    </template>
    <script>
        var commentBox = {
            template: '#tmp1',
            data(){//组件中的data一定是一个方法
                return {
                    user:'',
                    content:''
                }
            },
            methods:{
                postComment(){
                    var comment={id:Date.now(),user:this.user,content:this.content}
                    var list =JSON.parse(localStorage.getItem('cmts')||'[]')//获取所有的评论
                    list.unshift(comment)//与push相反，从头插入
                    //重新保存新的评论
                    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: "Mason", content: 'Hello World!!' },
                    { id: Date.now(), user: "July", content: 'I do not agree with you' },
                    { id: Date.now(), user: "Mike", content: 'Oh,it is really good!' }
                ],
                user:"",
                content:""
            },
            created(){
                this.loadComments()
            },
            methods: {
                loadComments(){
                    var list = JSON.parse(localStorage.getItem('cmts')||'[]')
                    this.list=list
                }
            },
            components: {
                'cmt-box': commentBox
            }
        })
    </script>
</body>

注意点

1.bootstrap的常见类型记下来

2.localStorage的储存和取出

3.localStorage默认是以字符串形式储存，所以要parse跟stringfy

scwMason

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue---评论列表实例

目的熟练父组件跟子组件之间的传递以及localStorage的使用代码<body> <div id="app"> <cmt-box @func='loadComments'></cmt-box> <ul class="list-group"> <li cl...
复制链接

扫一扫

专栏目录