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

　　效果图：

vue实现一个评论列表的更多相关文章

  1. vue 仿掘金评论列表

    先来个最终效果 代码: template代码: <template> <div class="main"> <div class="titl ...

  2. amazeui学习笔记--css（常用组件5）--评论列表Comment

    amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...

  3. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  4. vue是一个渐进式的框架，如何理解“渐进式”

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式.使用vue,你可以在原有大系统的上面,把一两个组件改用它实现 ...

  5. vue是一个渐进式的框架，我是这么理解的

    vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...

  6. Android开发——实现固定在ScrollView顶部的View，类似于新浪微博的评论列表的顶部

    现在很多App都实现了这个功能,例如新浪微博评论页面的评论.转发.赞的数字可以固定在屏幕上方.我个人很喜欢这种设计,所以利用一点空余时间简单实现了一个类似的功能. 先来看一下上面这张图的效果 这个是新 ...

  7. Android应用开发-小巫CSDN博客client之获取评论列表

    Android应用开发-小巫CSDN博客客户端之获取评论列表 上一篇博客介绍了博文具体内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能.获取评论列表,这个功能的实现跟前面获取文章列 ...

  8. node.js评论列表和添加购物车数据库表创建

    2.1:评论列表--发表评论 用户点击新闻列表某一条新闻,看到新闻详细发表评论 -用户输入评论内容 -发表评论 [将用户评论内容保存数据库 xz_comment] 2.2:评论列表--发表评论-开发评 ...

  9. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

随机推荐

  1. ROS tf基础使用知识

    博客参考:https://www.ncnynl.com/archives/201702/1306.html ROS与C++入门教程-tf-坐标变换 说明: 介绍在c++实现TF的坐标变换 概念: Co ...

  2. osg塔吊模拟-20191026

    在osg中模拟塔吊群作业

  3. 软件定义网络基础---SDN数据平面

    主要介绍SDN架构和转发模型 一:传统网络设备 (一)传统设备控制平面和数据平面 (二)数据平面的任务 数据平面对数据包的处理,主要通过查询由控制平面所生成的转发信息表来完成 (三)传统网络数据平面数 ...

  4. 【 Linux 】Systemd 使用说明（1）

    1. 前言 在 CentOS 7 中使用 systemd 取代了 init 的启动模式,这样的更新换代有什么好处呢?首先需要对 init 和 systemd 有个概念的认识. 2. init 概述 在 ...

  5. Python第一阶段04

    1.文件操作: # 指明编码 f = open("sisi", encoding="utf-8") # 读 data = f.read() print(data ...

  6. 强制卸载 Visual studio 2017

    微软挖的坑,很是烦人.还好老外这篇文章亲测可行.懒得翻译了,权做笔记吧. 网址是:https://jessehouwing.net/visual-studio-2017-force-uninstall ...

  7. Linux下Mongodb安装和启动配置 转载

    原文地址:https://www.cnblogs.com/Jimmy104/p/6181899.html 以下文章为转载,感谢网友,原文链接 http://blog.csdn.net/yuwenrul ...

  8. 高级UI-MD动画

    MD动画是谷歌推出的一种动画效果,其实现的效果能让用户看着很是舒服,符合MD动画的动画,有很强的用户交互体验 Touch Feedback(触摸反馈) 在触摸反馈这一块,用的最多的就是水波纹效果,而水 ...

  9. centos7 install docker

    sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo y ...

  10. java的ReentrantLock类详解

    ReentrantLock 能用于更精细化的加锁的Java类, 通过它能更清楚了解Java的锁机制 ReentrantLock 类的集成关系有点复杂, 既有内部类, 还有多重继承关系 类的定义 pub ...