<!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. Flutter生命周期

    生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情, flutter中的State生命周期和android以及React Native的生命周期类似. 大致可以分为 ...

  2. Dart自定义库、系统库和第三方库

    /* 前面介绍Dart基础知识的时候基本上都是在一个文件里面编写Dart代码的,但实际开发中不可能这么写,模块化很重要,所以这就需要使用到库的概念. 在Dart中,库的使用时通过import关键字引入 ...

  3. IDEA Git 修改后的文件无法Commit

    转自:https://blog.csdn.net/moneyshi/article/details/81298861 因对IDEA使用不熟,在使用和配置GIT的时候,可能哪里配置错误,导致我一直无法使 ...

  4. 0.9.0.RELEASE版本的spring cloud alibaba nacos+gateway网关实例

    gateway就是用来替换zuul的,功能都差不多,我们看下它怎么来跟nacos一起玩.老套路,三板斧: 1.pom: <?xml version="1.0" encodin ...

  5. time zone list

    GMT UTC WET WET CET CET MET CET ECT CET EET EET MIT Pacific/Apia HST Pacific/Honolulu AST America/An ...

  6. IDEA 多模块工程相互依赖

    最近为了结构项目,抽离通用模块,同时使用一个工程管理所有模块,使用了多模块工程.不过在依赖其他模块的编译上出现了问题,总是报找不到被依赖的jar包. 最后的解决办法也很简单,对于被依赖的模块,要在ma ...

  7. LeetCode_299. Bulls and Cows

    299. Bulls and Cows Easy You are playing the following Bulls and Cows game with your friend: You wri ...

  8. 压力测试 Apache ab

    https://www.jianshu.com/p/166a4ea8aade https://httpd.apache.org/docs/2.4/programs/ab.html 安装: 按照提示安装 ...

  9. HTML布局水平导航条2制作

    前两个博文导航条都不是铺满水平的浏览器的,很多导航条样式都是随着浏览器的移动,是100%.此外前两个博文导航条都是块状点击的,也就是给a标签加宽高,设置成块状显示,点击的时候不一定要点文字,只要点击该 ...

  10. mysql You can't specify target table for update in FROM clause解决方法

    mysql You can't specify target table for update in FROM clause解决方法出现这个错误的原因是不能在同一个sql语句中,先select同一个表 ...