正如大家買東西都習慣看評論,評論好就買,評論不好就遠離;所以評論對大家來說是很重要的,一個商品的評論往往數量挺多,所以評論列表的篩選這個功能也就需求大,在公司的專案中用的比較多。

問題是？如何來實現這個功能？

其實很簡單：

第一步：

先準備好資料按鈕，如程式碼所示

 <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>

最後的效果：

喜歡我給我點個贊吧。