vue 数据遍历筛选过滤排序的应用

来源：互联网发布：mac玩魔兽世界卡吗编辑：程序博客网时间：2024/04/30 02:50

在vue 中对v-for 遍历数据的处理方式可以分为两类：

使用computed 方法来过滤筛选数据;也可以使用methods 方式来筛选过滤数据

代码如下：

[html] view plain copy
<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 中的数据重新赋值，反而逻辑更清晰更便于维护。

阅读全文

0 0

vue 数据遍历筛选 过滤 排序的应用

vue 数据遍历筛选过滤排序的应用