vue饿了么项目实现评论列表的筛选

正如大家买东西都习惯看评论,评论好就买,评论不好就远离;所以评论对大家来说是很重要的,一个商品的评论往往数量挺多,所以评论列表的筛选这个功能也就需求大,在公司的项目中用的比较多。

问题是？如何来实现这个功能？

其实很简单：

第一步：

先准备好数据按钮，如代码所示

 <h1 class="title">商品评价</h1><ul class="selects"><li v-for="(item,index) in classifyArr" :key="index" :class="item.active===true?'active':''" @click="classifyFn(index)">{{item.name}}{{item.count}}</li></ul>

 classifyArr:[{name: '全部',count: this.food.ratings.length,active: true},{name: '推荐',count: this.food.ratings.filter((data)=>data.rateType === 0).length,active: false},{name: '吐槽',count: this.food.ratings.filter((data)=>data.rateType === 1).length,active: false},],

还有就是这个两个评论列表的数组数据：newRatings和 food.ratings

第二步：

给页面上的各个按钮绑定点击事件，当不同的按钮被点击时就执行对应的函数，从food.ratings挑选出数组元素给到newRatings

getRatings(index){if(index===0){return this.food.ratings;}else if(index===1){return this.food.ratings.filter((data)=>data.rateType === 0);}else{return this.food.ratings.filter((data)=>data.rateType === 1);}},

第三步：

在vue页面上用v-for列表渲染newRatings 就可以了；

<div class="rates-list"><ul><li v-for="(item,index) in newRatings" :key="index" ><p><span class="time">{{item.rateTime}}</span> <span class="img">{{item.username}}<img :src="item.avatar" alt=""></span></p><p><span class="icon-point-right"></span><span class="text">{{item.text}}</span></p></li></ul></div>

最后的效果：

喜欢我给我点个赞吧。

vue饿了么项目实现评论列表的筛选相关推荐

vue.js项目实战运用篇之抖音视频APP-第十节：评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
我的基于Vue的饿了么项目有感
我的基于vue的饿了么项目学习前端也有五个月了,学完所有知识点之后买了个基于vue的饿了么项目来做,在花费了几天的时间之后总算完成了,心有感慨之余打算写一篇博客来记录下我在这整个过程的收获创建基本 ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
Java毕设项目电影评论网站系统（java+VUE+Mybatis+Maven+Mysql）
Java毕设项目电影评论网站系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Web ...
Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
Android 仿抖音视频播放列表和评论列表
Android 汇集CSDN.GitHub等最实用的良心之作-KING Android最实用的各种技能点的网址链接(每天都会更新,希望大家用的上) Android 仿抖音系列之视频播放列表和评论列表 ...
springboot+vue练手级项目，真实的在线博客系统
文章目录 spring boot 练手实战项目说明基础知识面试准备 1. 工程搭建 1.1 新建maven工程 1.1.2遇到的bug 1.2 配置 1.3 启动类 2. 首页-文章列表 2.1 ...
【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...