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

最新推荐文章于 2024-05-16 10:38:04 发布

v折耳

最新推荐文章于 2024-05-16 10:38:04 发布

阅读量3.1w

点赞数 2

分类专栏： vue 文章标签： vue 过滤排序筛选

本文链接：https://blog.csdn.net/wngzhem/article/details/53258130

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

v折耳

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
vue 数据遍历筛选过滤排序的应用

vue 中对v-for 遍历数据的处理方式可以分为两类：一.对data 直接赋值（比较笨，但是比较直接） {{item.n}} var app=new Vue({ el:'#app', data:{ l
复制链接

扫一扫