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 中的資料重新賦值 ，反而邏輯更清晰更便於維護。