vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态
一、基本数据标识设计shop/ratings/ratings.vue
1）data数据设计
data(){return{showText:true, //条件1：只显示带文字的评价ratingType:2, //条件2：评价显示类型：0满意，1不满意，2全部}}
2）事件及样式类设计
知识点：
- 绑定样式可写成：
:class="{on:showText}其中on为样式，showText为数据
也可写成：:class="showText?'on':''- 点击事件可写成：
@click="selectType(2)"
辅以方法selectType(ratingType){this.ratingType=ratingType}
也可写成：@click="ratingType=2"
<div class="ratingselect"><div class="rating-type border-1px"><!-- [条件1]如果点击此处就把data里的ratingType改为2即显示全部评价 --><!-- 满足===2条件则显示active类样式 --><span class="block positive" @click="ratingType=2" :class="ratingType===2?'active':''">全部<span class="count">30</span></span><!-- 如果点击此处就把data里的ratingType改为0即显示满意评价 --><span class="block positive" @click="ratingType=0":class="ratingType===0?'active':''">满意<span class="count">28</span></span><span class="block negative" @click="ratingType=1":class="ratingType===1?'active':''">不满意<span class="count">2</span></span></div><!-- [条件2]如果点击此处就把data里的showText取反，即显示有内容的或全部 --><!-- showText为true则显示on类样式 --><div class="switch" @click="showText=!showText":class="showText?'on':''"><span class="iconfont icon-check_circle"></span><span class="text">只看有内容的评价</span></div></div>======数据设计：==========
data(){return{showText:true, //只显示带文字的评价ratingType:2, //评价显示类型：0满意，1不满意，2全部}}
或这样写也可以
<div class="ratingselect"><div class="rating-type border-1px"><!-- [条件1]如果点击此处就把data里的ratingType改为2即显示全部评价方法1：ratingType=2--><!-- 满足===2条件则显示active类样式方法1： :class="ratingType===2?'active':''" 或见详情--><span class="block positive" @click="selectType(2)" :class="{active:ratingType===2}">全部<span class="count">30</span></span><!-- 如果点击此处就把data里的ratingType改为0即显示满意评价 --><span class="block positive" @click="ratingType=0":class="{active:ratingType===0}">满意<span class="count">28</span></span><span class="block negative" @click="ratingType=1":class="{active:ratingType===1}">不满意<span class="count">2</span></span></div><!-- [条件2]如果点击此处就把data里的showText取反，即显示有内容的或全部 --><!-- showText为true则显示on类样式方法1：:class="showText?'on':''或见详情 --><div class="switch" @click="showText=!showText":class="{on:showText}"><span class="iconfont icon-check_circle"></span><span class="text">只看有内容的评价</span></div></div>=========数据及方法========
data(){return{showText:true, //只显示带文字的评价ratingType:2, //评价显示类型：0满意，1不满意，2全部}}
methods:{//点击对应元素改变data()显示评价类型为对应值selectType(ratingType){this.ratingType=ratingType}}
3） 分析
用arr.filter()返回满足条件的数组元素为一个新数组，此处有2个条件：
条件1显示：全部 或 满意 或 不满意
条件2显示：有内容 或 无内容
条件1：显示评价类型：满意0，不满意1，全部2
data里：ratingType: 0/1/2
api里：rating.rateType:0/1
ratingType===2则显示所有 不用看后面 || ratingType===rating.rateType 否则就看此是否等于data里的值，返回对应满意或不满意评价
所以：ratingType===2 || rating.rateType===ratingType
条件1 && 条件2之间是与的关系
条件2：是否只显示带内容的评价
data里：showText: true/false
api里：rating.text：有值/没值
showText为false显示所有不看后面；rating.text.length 否则就看此是否有值，有则返回true
所以：!showText || rating.text.length>0
4）根据分析写计算属性的过滤条件
<!--【2】v-for里改成：in filterRatings-->
<li class="rating-item" v-for="(rating,index) in filterRatings" :key="index">computed:{//【1】按条件过滤显示评价列表filterRatings(){const {ratings,showText,ratingType}=this// 返回满足条件的新数组return ratings.filter((rating)=>{/*条件1: && 条件2:*/// 解构需要的值方便简写const {rateType,text}=ratingreturn (ratingType===2 || rateType===ratingType) && (!showText || text.length>0)}) }
}
效果：点击满意只显示满意评价，同时点击只显示有评价内容的只显示有内容评价
二、用getters.js好评数量计算
1）分析
- 显示全部评价简单：计算所有评价长度即可 ratings.length
- 显示好评数量：用getters生成新状态即可，具体可用：reduce()计算出rating.rateType===0的数量，即是好评数量
- 差评数量：总数-好评 即可
2）getters.js 好评数量计算
// getters类似computed：处理vuex中现有的状态，生成返回一个所有地方都可调用的新状态
export default{//【1】重新计算返回评价列表所有为满意评价的数量rateType===0即表示好评positiveRateCount(state){// 此处用到三目运算：好评+1，否则+0return state.ratings.reduce((total,rating)=>total+(rating.rateType===0?1:0),0)},}3）调用显示好差评数量 ratings.vue
【3】显示数量
全部<span class="count">{{ratings.length}}</span>
满意<span class="count">{{positiveRateCount}}</span>
不满意<span class="count">{{ratings.length-positiveRateCount}}</span>import {mapState,mapGetters} from 'vuex' //【0】引入getters辅助函数
computed:{...mapGetters(['positiveRateCount']),//【1】好评的数量
}
效果：正确显示总数、好评数、差评数
vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态相关推荐
- VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例 演示 ...
- NLP-二分类的应用-区分外卖评论好评/差评
目录 一.概念 二.二分类实战-划分好评/差评 1.处理步骤 2.实战代码 一.概念 文本分类一般可以分为二分类.多分类.多标签分类三种情况. 二分类是指将一组文本分成两个类(0或1),比较常见的应用 ...
- vue外卖二十：商家详情-评价列表：评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll
一.评价列表接口模拟-获取完整数据链流程 1)数据模拟mockjs src/mock/mockServer.js /* 使用mockjs提供mock数据接口*/ import Mock from 'm ...
- Vue（二十一）使用express模拟接口数据
1.下载express ... 2.使用vue-cli下载好项目文件 ... 3.找到文件 build - webpack.dev.conf.js 'use strict' const utils = ...
- 认证资料大全（二十一）------ SAIR认证列表
SAIR认证列表 Linux/GNU Certified Administrator(LCA) 3x0-204:level 2 sendmailmailing system ...
- Vue（二十一）Layer弹出层
安装:下载源码到本地 layer: 丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips 等等几乎所有的弹出交互.目前已成为 ...
- 似外卖，淘宝用mysql统计好评差评
有三张表商家表,订单表,评价表 一个商家多个订单,一个订单对应一个评价,订单表有商家id,评价表有商家id还有订单id sql=" SELECT s.*,(SELECT count(e.id ...
- CRMEB二次开发新增用户评论关键词过滤、后台审核通过后前端才显示评论信息
需要修改到的文件 技术开发QQ: 735660248 \app\adminapi\controller\v1\product\StoreProductReply.php \app\adminapi\r ...
- vue外卖十四：商家详情：用mockjs模拟api数据接口
1)安装mockjs 官网:mockjs.com 文档:https://github.com/nuysoft/Mock/wiki/Getting-Started http://mockjs.com/e ...
最新文章
- 利用jQuery获取jsonp
- linux中opt是啥文件夹,Linux下各文件夹的含义及解释
- prometheus job 重复_分享一款开源的监控神器--Prometheus 简介、架构及相关概念
- UNIX再学习 -- exit 和 wait 系列函数
- 纯CSS美化单复选框（checkbox、radio）
- 新浪微博：大规模离线视频处理系统的架构设计
- OpenCV调用YOLOv4进行目标检测
- win 7 或 mac 远程桌面到 ubuntu （ssh）
- python莫比乌斯内接矩形_莫比乌斯反演例题集 ^_^(示例代码)
- [家里蹲大学数学杂志]第187期实数集到非负实数集的双射有无穷多个间断点
- Linux宝库名人轶事栏目 | 我与中国开源软件二十年（三）
- 国外问卷调查赚钱网站
- Android版数据结构与算法(十二)：经典排序算法再回顾
- GPS 校验和 代码_嵌入式Linux平台的GPS数据采集
- Android应用或游戏集成facebook登陆完整流程
- 如何让ipad成为电脑的扩展屏
- 外网怎么访问公司内网的数据库？
- ORACLE中的各种SCN查询
- 定义结构体时的初始化默认值
- unity3D中的伽马空间和线性空间