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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
微信小程序实现弹出层效果
May 26 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
JavaScript实现10秒后再次获取验证码
Dec 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
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
团队口号大全
2014/06/06 职场文书
云台山导游词
2015/02/03 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python