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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
解读ES6中class关键字
Nov 20 Javascript
angularJS开发注意事项
May 26 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
解决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
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
学习和使用python的13个理由
2019/07/30 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
pyqt5中动画的使用详解
2020/04/01 Python
python实现双人五子棋(终端版)
2020/12/30 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
实习评语
2013/12/16 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
六五普法宣传标语
2014/10/06 职场文书
阿甘正传观后感
2015/06/01 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
Redis Lua脚本实现ip限流示例
2022/07/15 Redis