评论功能

最新推荐文章于 2024-07-20 16:46:53 发布

Finally_leave

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量315

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Finally_leave/article/details/107359469

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <cmt-box @func="localComments"></cmt-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">
                评论人:{{item.user}}
                </span>
                {{item.content}}
            </li>
        </ul>
        
    </div>
    <template id="tmpl">
        <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 name="" id="" class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
            </div>
        </div>
    </template>
    <script>
        var commentBox = {
            template:'#tmpl',
            data(){
                return {
                    user:'',
                    content:'',
                }
            },
            methods: {
                postComment(){//发表评论的方法
                	// 最新的评论数据对象
                    var comment = {id:Date.now(),user:this.user,content:this.content};
                 	//这是从 localStorage 中获取所有的评论
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                    //将最新的评论放到最上面
                    list.unshift(comment);
                    //从新保存最新的数据
                    localStorage.setItem('cmts',JSON.stringify(list));//将list存的数据转换成字符串
                    //将文本框清空
                    this.user = this.content = '';
                    //调用子组件的方法localComments();
                    this.$emit('func')
                }
            },
        }
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:Date.now(),user:'111',content:'今天天气真好'},
                    {id:Date.now(),user:'222',content:'今天好热'},
                    {id:Date.now(),user:'333',content:'明天下雨'},
                ],
            },
            created() {
                this.localComments();
            },
            methods:{
                localComments(){ //从本地的localStorage中，加载评论列表
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                    this.list = list;
                }
            },
            components:{
                    "cmt-box":commentBox
                },
        })
    </script>
</body>
</html>

Finally_leave

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
评论功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./lib/bo
复制链接

扫一扫