DDR爱好者之家

vue 数据遍历筛选 过滤 排序的应用操作
站长资源 2024/12/24 佚名
10 1538
DDR爱好者之家 Design By 杰米

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="/UploadFiles/2021-04-02/it.image_path">


以上这篇vue 数据遍历筛选 过滤 排序的应用操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米