当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue实现一个评论列表

vue实现一个评论列表

2019年10月25日  | 移动技术网IT编程  | 我要评论 
<!doctype html>
<html>
    <head>
        <title>简易评论列表</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
    </head>
    <body>
        <div id="app">
            <ul class="list-group">
                <!-- 为事件绑定别称时不要使用驼峰命名 -->
                <box @plocalcoments="localcoments"></box>
                <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="temp">
            <div>
                <div class="form-group">
                    <label>评论人：</label>
                    <input type="text" class="form-control" v-model="user">
                </div>
                <div class="form-group">
                    <label>评论内容：</label>
                    <textarea class="form-control" v-model="content"></textarea>
                </div>
                <div class="form-group">
                    <input type="button" value="发表评论" class="btn btn-primary" @click="add">
                </div>
            </div>
        </template>
    </body>
    <script src="node_modules\vue\dist\vue.js"></script>
    <script>
        let commentbox = {//定义评论组件
            data(){//进行数据的绑定,记住组件内的数据是一个方法
                return{
                    user:'',
                    content:''
                }
            },
            template:"#temp",
            methods:{
                add(){//评论添加函数
                    //获取当前评论
                    let comment = {id:date.now(),user:this.user,content:this.content};
                    //从localstorage读取列表
                    let list = json.parse(localstorage.getitem('cmts')|| '[]');//若不存在cmts则返回空数组，避免json解析出错
                    if(comment.user&&comment.content)//进行判空
                    list.unshift(comment);
                    localstorage.setitem('cmts',json.stringify(list));
                    this.user=this.content='';//清空评论列表
                    //利用$emit()方法来调用父组件的方法
                    this.$emit('plocalcoments');
                }
            }
        }
        let vm = new vue({
            el:"#app",
            data:{
                list:[]
            },
            components:{
                box:commentbox
            },
            created(){
                //实例创建后加载评论
                this.localcoments();
            },
            methods:{
                localcoments(){
                    let list = localstorage.getitem('cmts'||'[]');//若不存在cmts则返回空数组，避免json解析出错
                    this.list = json.parse(list);//刷新数据
                }
            }
        });
    </script>
</html> 
<!doctype html>
<html>
    <head>
        <title>简易评论列表</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
    </head>
    <body>
        <div id="app">
            <ul class="list-group">
                <!-- 为事件绑定别称时不要使用驼峰命名 -->
                <box @plocalcoments="localcoments"></box>
                <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="temp">
            <div>
                <div class="form-group">
                    <label>评论人：</label>
                    <input type="text" class="form-control" v-model="user">
                </div>
                <div class="form-group">
                    <label>评论内容：</label>
                    <textarea class="form-control" v-model="content"></textarea>
                </div>
                <div class="form-group">
                    <input type="button" value="发表评论" class="btn btn-primary" @click="add">
                </div>
            </div>
        </template>
    </body>
    <script src="node_modules\vue\dist\vue.js"></script>
    <script>
        let commentbox = {//定义评论组件
            data(){//进行数据的绑定,记住组件内的数据是一个方法
                return{
                    user:'',
                    content:''
                }
            },
            template:"#temp",
            methods:{
                add(){//评论添加函数
                    //获取当前评论
                    let comment = {id:date.now(),user:this.user,content:this.content};
                    //从localstorage读取列表
                    let list = json.parse(localstorage.getitem('cmts')|| '[]');//若不存在cmts则返回空数组，避免json解析出错
                    if(comment.user&&comment.content)//进行判空
                    list.unshift(comment);
                    localstorage.setitem('cmts',json.stringify(list));
                    this.user=this.content='';//清空评论列表
                    //利用$emit()方法来调用父组件的方法
                    this.$emit('plocalcoments');
                }
            }
        }
        let vm = new vue({
            el:"#app",
            data:{
                list:[]
            },
            components:{
                box:commentbox
            },
            created(){
                //实例创建后加载评论
                this.localcoments();
            },
            methods:{
                localcoments(){
                    let list = localstorage.getitem('cmts'||'[]');//若不存在cmts则返回空数组，避免json解析出错
                    this.list = json.parse(list);//刷新数据
                }
            }
        });
    </script>
</html>

　　效果图：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网