JavaScript
搜索
分类

vue实现评论列表功能

作者：angle-xiu 时间：2023-07-02 17:05:29　

具体代码如下所示：


<!DOCTYPE html>
<html>
 <head>
   <title>简易评论列表</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofollow" rel="external nofollow" >
 </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" rel="external nofollow" rel="external nofollow" >
 </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实现评论列表功能

总结

以上所述是小编给大家介绍的vue实现评论列表功能,网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：https://www.cnblogs.com/angle-xiu/archive/2019/10/25/11736880.html

标签：vue,评论列表
0
投稿

猜你喜欢

  • 使链接具有最大化、最小化的功能代码

    2008-02-24 16:43:00

  • Python入门之集合的使用教程

    2022-10-31 13:44:45

  • 格式化数字ASP，PHP版

    2009-01-19 14:17:00

  • Python+Django搭建自己的blog网站

    2022-02-24 16:32:45

  • 使用K.function()调试keras操作

    2022-08-03 05:07:31

  • python将三维数组展开成二维数组的实现

    2023-01-07 06:34:30

  • ASP编程中使用数组方法实例讲解

    2008-02-15 08:25:00

  • Python之re操作方法(详解)

    2022-05-15 18:38:15

  • Python从list类型、range()序列简单认识类(class)【可迭代】

    2022-09-09 14:07:20

  • phpmyadmin中禁止外网使用的方法

    2023-09-12 01:10:22

  • python实现从网络下载文件并获得文件大小及类型的方法

    2021-05-15 17:53:04

  • python 爬虫如何实现百度翻译

    2023-02-20 18:33:51

  • Python变量、数据类型、数据类型转换相关函数用法实例详解

    2021-03-29 08:30:35

  • SQL“多字段模糊匹配关键字查询”

    2008-04-24 14:16:00

  • 一文读懂navicat for mysql基础知识

    2024-01-23 00:46:25

  • pytorch 数据集图片显示方法

    2022-01-14 08:57:36

  • Python发送邮件实现基础解析

    2022-01-28 10:33:22

  • vue中记录滚动条位置的两种方法

    2024-04-27 15:59:33

  • 基于python的selenium两种文件上传操作实现详解

    2022-01-31 23:02:17

  • numpy之sum()的使用及说明

    2023-12-12 00:31:16
    • asp之家 网络编程 m.aspxhome.com