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 中的数据重新赋值 ,反而逻辑更清晰更便于维护。