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

最新推荐文章于 2024-03-29 14:19:17 发布

Lofty_ambition

最新推荐文章于 2024-03-29 14:19:17 发布

阅读量1.5k

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

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

代码如下：

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

Lofty_ambition

关注

0
点赞
踩
0

收藏

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

在vue 中对v-for 遍历数据的处理方式可以分为两类：使用computed 方法来过滤筛选数据;也可以使用methods 方式来筛选过滤数据代码如下：[html] view plain copybody> div id="app"> ul> li
复制链接

扫一扫