vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态

本文主要是介绍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】好评的数量
}