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


Posted in Javascript onNovember 17, 2020

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>

效果图

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

可以看到 computed 和methods对data的处理并没有影响到原数据。

但在实际应用中,常常会对一组数据进行 排序,筛选,过滤.....等一些列产品运行 提的需求;所以会有一些各种形状的按钮需要点击触发事件,我觉得用在外面声明一个变量放数据,根据事件对 vue 中的数据重新赋值 ,反而逻辑更清晰更便于维护。

补充知识:v-for循环遍历:vue-商品列表查询数据分类显示,json数据格式的解析

以饿了么来举例吧,我们要显示下图画线框里面的食物信息,数据是遍历json数据出来的,

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

json数据在呢?结构是酱紫的哭数组里面放了多个对象。对象里面放了数组的同时又放了若干对象,我们要实现上图的效果(将套餐类,特色鸡公煲套餐分类显示),就要把foods这个数组里面的name,description,tips显示出来尴尬

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

怎么做呢?

首先要用v-for得到goods.json里的每个对象,把它存到goods: [],数组中并返回。下面就是查询数据的的代码块了

data() {
  return {
  goods: [],
  }
 },
 
 created() {
  this.goodsList();
 
 },
 methods: {
  goodsList() {
  var tempList = [];
  var self = this;
  this.http.get('static/goods.json').then(function(response) {
   self.goods = response.data;
   console.log(self.goods)
 
  }).catch(function(error) {
   console.log(error);
  }) 
  } 
 } 

console.log(self.goods) 打印一下:有7条数据

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

然后,将这些数据通过htm标签拼接显示出来就好了,棒棒哒~~

。。。。。。。。。

吃瓜的:额,不对吧,这就显示了?有点太容易了吧。。。

吃瓜的:数据没解析完全吧?

吃瓜的。。。。

我:额。。。我去HTML里面继续解析。。

吃瓜的:吐血中。。。

接下来是我们切换下片场,来到HTML。。。

重头戏1:遍历goods数组,获取对象(上面刚刚返回出来了goods)

<dl v-for="items in goods"> <!--遍历goods数组-->

因为goods里面装的全是对象,所以就可以把“套餐类”和“特色鸡公煲套餐”显示粗来了:

<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>

重头戏2:遍历foods数组

<dd class="fooddetails_root clearfix" v-for="it in items.foods">

这就可以将foods数组里面的对象和数组获取到了,显示食物名称,描述,价格,月售

<!--显示食物名称-->
<p>{{it.name}}</p>  
<!--显示食物评价-->
<p>{{it.description}}</p>
<!--显示食物月售几份-->
<p>{{it.tips}}</p>
<!--食物价格-->
<p>{{it.specfoods[0].price}}</p>

OK了

下面是全部的html代码:

<div class="food_wrapper fl">
<dl v-for="items in goods">  <!--遍历goods数组-->
<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>
<!--得到对象里面的foods数组-->
<dd class="fooddetails_root clearfix" v-for="it in items.foods"> 
<!--显示图片-->
<span class="img_logo fl" style="height: 71px;"><img :src="it.image_path" alt="" /></span>
<section class="fooddetails_info fl">
<!--显示食物名称-->
<p>{{it.name}}</p>  
<!--显示食物评价-->
<p>{{it.description}}</p>
<!--显示食物月售几份-->
<p>{{it.tips}}</p>
<!--食物价格-->
<p>{{it.specfoods[0].price}}</p> 
 
</section>
</dd>
</dl> 
</div>

以上这篇vue 数据遍历筛选 过滤 排序的应用操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
详解 TypeScript 枚举类型
Nov 02 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 #Javascript
详解Vue数据驱动原理
Nov 17 #Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 #Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 #Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 #Javascript
vue的webcamjs集成方式
Nov 16 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
Python 学习笔记
2008/12/27 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
村委会贫困证明
2014/01/14 职场文书
初一体育教学反思
2014/01/29 职场文书
设计师个人求职信范文
2014/02/02 职场文书
春风行动实施方案
2014/03/28 职场文书
教师考核评语
2014/04/28 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
浅析Django接口版本控制
2021/06/26 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers