在vue 中對v-for 遍歷數據的處理方式 可以分爲兩類 ：
使用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 中的數據重新賦值 ，反而邏輯更清晰更便於維護。
