vue 遍历数组的巧妙之处

vue 的遍历还可以嵌套过滤器来做,通过v-for 遍历一个数组的同时又对数组的每一个对象做一个过滤判断,这样极大的方便了工作者的使用。而它的使用方式也极其简单,只要在计算属性中写一个函数,函数中返回一个过滤器的方法,最后在这个过滤器中返回一个判断即可。判断为真,即满足条件,从而展示。

例子如下:

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
    return number % 2 === 0
  })
}

时间: 2024-10-13 22:53:28

vue 遍历数组的巧妙之处的相关文章

vue遍历数组和对象的方法以及他们之间的区别

前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中加值,因为那样即使能加入值页面也不会跟着改变 一,vue遍历数组 1,使用vue数组变异方法 pops 删除数组租后一项 push 往数组里面增加一项 shift 删除数组第一项 unshift 往数组第一项里面加一线内容 splice 数组截取 sort 数组排序 reverse 对数组取反 2,数组的引用 3,vue set方法 二,vue遍历对象 1,对象引用 2,set方法 由于时间问题下回仔细说明,谢谢 原文地址:h

vue 遍历数组和对象

一,遍历数组 wxml布局 <view class='common_tags_item' wx:for="{{filter_grade_list}}" wx:key="this" bindtap='selectFilterGrade' data-hi="{{index}}" style="background:{{filter_grade===index ? '#FFF5F5': '#F2F2F2'}};border-width:

Vue基础学习 --- 遍历数组

<body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user in users"> {{user.name}}:{{user.age}} </li> <!-- index索引,从0开始. --> <li v-for="(item, index) in users" :key="index"

JavaScript基础 使用for循环遍历数组 并 查询 数组中是否存在指定的值

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

js 使用for循环遍历数组

今天写个无聊的东西!for循环的使用!如下:定义a数组,b为伪数组! var a = [1,2,3,0,5,4]; var b = document.getElementsByTagName('li'); //[<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>] 第一种:错误型! for ( var i = 0; i <

VBA遍历数组的2种方式

1.情景展示 VBA编程,如何对数组进行遍历? 2.解决方案 方式一:使用for循环 Sub 遍历数组1() '声明一个变量 Dim Arr As Variant '声明一个数字变量 Dim i As Integer '变量类型指定为数组并赋值 Arr = Array(1, 2, 3, 4, 5) '使用For...To...进行遍历 For i = 0 To UBound(Arr) Debug.Print Arr(i) '可以修改数组 Arr(i) = Rnd Next i End Sub 方

vue_v-for_遍历数组_遍历对象

1. v-for 遍历数组 html <div id="test"> <ul> <li v-for="(p, index) in persons" :key="index"> {{p.name}} {{p.age}}<br /> <button @click="deleteP(idnex)">删除 - 变异方法:vue 监测数组的相关方法</button>

笔试算法题(07):还原后序遍历数组 &amp; 半翻转英文句段

出题:输入一个整数数组,判断该数组是否符合一个二元查找树的后序遍历(给定整数数组,判定其是否满足某二元查找树的后序遍历): 分析:利用后序遍历对应到二元查找树的性质(序列最后一个元素必定是根节点,从左向右第一个比根节点大的元素开始直到根节点之前的所有元素必定在右子树,之前的所有元素必定在左子树): 解题: 1 bool PostOrderCheck(int *array, int i, int j) { 2 /** 3 * 如快速排序一样,解决小子文件 4 * */ 5 if(j-i+1 ==

foreach ()语法结构提供了遍历数组的简单方式

foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息.有两种语法: foreach (array_expression as $value) statement foreach (array_expression as $key => $value) statement 第一种格式遍历给定的 array_expression 数组.每次循环中,当前单元的值被赋给 $value 并且数组内部的指