vue 資料遍歷篩選 過濾 排序的應用
阿新 • • 發佈:2019-02-20
vue 中對v-for 遍歷資料的處理方式 可以分為兩類 :
一.對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頁面的顯示。
但是有時候這樣會改動原資料,不太友善,很多時候我們只是想做個排序,資料篩選。
推薦使用第二種方法
方法二 : 使用computed 方法來過濾篩選資料;也可以使用methods 方式來篩選過濾資料
程式碼如下:
效果圖<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的處理並沒有影響到原資料。
但在實際應用中,常常會對一組資料進行 排序,篩選,過濾.....等一些列產品執行 提的需求;所以會有一些各種形狀的按鈕需要點選觸發事件,我覺得用在外面宣告一個變數放資料,根據事件對 vue 中的資料重新賦值 ,反而邏輯更清晰更便於維護。