vue餓了麼專案實現評論列表的篩選
阿新 • • 發佈:2018-12-20
正如大家買東西都習慣看評論,評論好就買,評論不好就遠離;所以評論對大家來說是很重要的,一個商品的評論往往數量挺多,所以評論列表的篩選這個功能也就需求大,在公司的專案中用的比較多。
問題是?如何來實現這個功能?
其實很簡單:
第一步:
先準備好資料按鈕,如程式碼所示
<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>
最後的效果:
喜歡我給我點個贊吧。