vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
vue 中對v-for 遍歷數(shù)據(jù)的處理方式 可以分為兩類 ：
一.對data 直接賦值（比較笨，但是比較直接）
<div id='app'> <ul> <li v-for='item in list'>{{item.n}}</li> </ul> </div> </body>
<script> var app=new Vue({ el:’#app’, data:{ list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}], } }) </script>
使用 app.list=[{n:44},{n:55},{n:66},{n:11},{n:22},{n:33}]直接賦值改變html頁面的顯示。
但是有時(shí)候這樣會改動原數(shù)據(jù)，不太友善，很多時(shí)候我們只是想做個(gè)排序，數(shù)據(jù)篩選。
推薦使用第二種方法
方法二 ： 使用computed 方法來過濾篩選數(shù)據(jù);也可以使用methods 方式來篩選過濾數(shù)據(jù)
代碼如下：
<body> <div id='app'> <ul> <li v-for='item in list'>{{item.n}}</li> </ul> <ul> <li v-for='item in listCmputed'>{{item.n}}</li> </ul> <ul> <li v-for='item in listMe(list)'>{{item.n}}</li> </ul> </div> </body>
<script> var app=new Vue({ el:’#app’, data:{ list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}], }, computed:{ listCmputed:function(){ return this.list.filter(function(item){ return item.n>=33 }) } }, methods:{ listMe:function(list){ return list.filter(function(item){ return item.n<=33 }) } } }) </script>
效果圖
可以看到 computed 和methods對data的處理并沒有影響到原數(shù)據(jù)。
但在實(shí)際應(yīng)用中，常常會對一組數(shù)據(jù)進(jìn)行 排序，篩選，過濾.....等一些列產(chǎn)品運(yùn)行 提的需求；所以會有一些各種形狀的按鈕需要點(diǎn)擊觸發(fā)事件，我覺得用在外面聲明一個(gè)變量放數(shù)據(jù)，根據(jù)事件對 vue 中的數(shù)據(jù)重新賦值 ，反而邏輯更清晰更便于維護(hù)。
補(bǔ)充知識：v-for循環(huán)遍歷:vue-商品列表查詢數(shù)據(jù)分類顯示，json數(shù)據(jù)格式的解析
以餓了么來舉例吧，我們要顯示下圖畫線框里面的食物信息，數(shù)據(jù)是遍歷json數(shù)據(jù)出來的，
json數(shù)據(jù)在呢？結(jié)構(gòu)是醬紫的哭數(shù)組里面放了多個(gè)對象。對象里面放了數(shù)組的同時(shí)又放了若干對象，我們要實(shí)現(xiàn)上圖的效果（將套餐類，特色雞公煲套餐分類顯示），就要把foods這個(gè)數(shù)組里面的name,description,tips顯示出來尷尬
怎么做呢？
首先要用v-for得到goods.json里的每個(gè)對象，把它存到goods: [],數(shù)組中并返回。下面就是查詢數(shù)據(jù)的的代碼塊了
data() { return { goods: [], } }, created() { this.goodsList(); }, methods: { goodsList() { var tempList = []; var self = this; this.http.get(’static/goods.json’).then(function(response) { self.goods = response.data; console.log(self.goods) }).catch(function(error) { console.log(error); }) } } console.log(self.goods) 打印一下：有7條數(shù)據(jù)
然后，將這些數(shù)據(jù)通過htm標(biāo)簽拼接顯示出來就好了，棒棒噠~~
。。。。。。。。。
吃瓜的：額，不對吧，這就顯示了？有點(diǎn)太容易了吧。。。
吃瓜的：數(shù)據(jù)沒解析完全吧？
吃瓜的。。。。
我：額。。。我去HTML里面繼續(xù)解析。。
吃瓜的：吐血中。。。
接下來是我們切換下片場，來到HTML。。。
重頭戲1：遍歷goods數(shù)組，獲取對象（上面剛剛返回出來了goods）
<dl v-for='items in goods'> <!--遍歷goods數(shù)組-->
因?yàn)間oods里面裝的全是對象，所以就可以把“套餐類”和“特色雞公煲套餐”顯示粗來了:
<dt class='category_title'><strong >{{items.name}}</strong></dt>
重頭戲2：遍歷foods數(shù)組
<dd v-for='it in items.foods'>
這就可以將foods數(shù)組里面的對象和數(shù)組獲取到了,顯示食物名稱，描述，價(jià)格，月售
<!--顯示食物名稱--><p>{{it.name}}</p> <!--顯示食物評價(jià)--><p>{{it.description}}</p><!--顯示食物月售幾份--><p>{{it.tips}}</p><!--食物價(jià)格--><p>{{it.specfoods[0].price}}</p>
OK了
下面是全部的html代碼:
<div class='food_wrapper fl'><dl v-for='items in goods'> <!--遍歷goods數(shù)組--><dt class='category_title'><strong >{{items.name}}</strong></dt><!--得到對象里面的foods數(shù)組--><dd v-for='it in items.foods'> <!--顯示圖片--><span style='height: 71px;'><img :src='http://www.hdgsjgj.cn/bcjs/it.image_path' alt='' /></span><section class='fooddetails_info fl'><!--顯示食物名稱--><p>{{it.name}}</p> <!--顯示食物評價(jià)--><p>{{it.description}}</p><!--顯示食物月售幾份--><p>{{it.tips}}</p><!--食物價(jià)格--><p>{{it.specfoods[0].price}}</p> </section></dd></dl> </div>
以上這篇vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 基于PHP做個(gè)圖片防盜鏈2. ASP.NET MVC把數(shù)據(jù)庫中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字3. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解4. XML在語音合成中的應(yīng)用5. .NET中實(shí)現(xiàn)對象數(shù)據(jù)映射示例詳解6. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)7. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁8. 如何使用ASP.NET Core 配置文件9. jscript與vbscript 操作XML元素屬性的代碼10. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)
網(wǎng)公網(wǎng)安備