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.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
this在vue和小程序中的使用详解
Jan 28 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python读取键盘输入的2种方法
2015/06/16 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python实现端口检测的方法
2018/07/24 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python 录制系统声音的示例
2020/12/21 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
应付会计岗位职责
2013/12/12 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
导游词之上海豫园
2019/10/24 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
python 通过使用Yolact训练数据集
2021/04/06 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python