首页 web前端 js教程 使用vue中的v-for遍历二维数组的方法

使用vue中的v-for遍历二维数组的方法

May 31, 2018 pm 05:35 PM
v-for 遍历

下面我就为大家分享一篇使用vue中的v-for遍历二维数组的方法,具有很好的参考价值,希望对大家有所帮助。

如下所示:

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id=&#39;downloaddata&#39;>
   <tr v-for=&#39;(item, index) in data&#39;>
    <template v-for=&#39;items in item&#39;>
     <template v-for=&#39;(itemss, indexs) in items&#39; v-if=&#39;indexs !== "type"&#39;>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>
登录后复制

其中,data数据为:

this.data = [
   [
    {
     type: &#39;&#39;,
     name: &#39;资产&#39;,
     start: &#39;期末余额&#39;,
     end: &#39;期初余额&#39;
    },
    {
     type: &#39;&#39;,
     name: &#39;负债和所有者权益(或股东权益)&#39;,
     start: &#39;期末余额&#39;,
     end: &#39;期初余额&#39;
    }
   ],
   [
    {
     type: &#39;&#39;,
     name: &#39;资产&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;&#39;,
     name: &#39;负债&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;货币资金&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;负债&#39;,
     name: &#39;应付短期融资款&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;其中:客户存款&#39;,
     start: 125000,
     end: 12534567
    },
    {
     type: &#39;&#39;,
     name: &#39;所有者权益(或股东权益)&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;&#39;,
     start: &#39;&#39;,
     end: &#39;&#39;
    },
    {
     type: &#39;所有者权益(或股东权益&#39;,
     name: &#39;实收资本(或股本)&#39;,
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: &#39;资产&#39;,
     name: &#39;资产总计&#39;,
     start: 111,
     end: 11
    },
    {
     type: &#39;所有者权益(或股东权益&#39;,
     name: &#39;资本公积&#39;,
     start: 125000,
     end: 12534567
    }
   ]
  ]
登录后复制

结果:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

基于Axios 常用的请求方法别名(详解)

Bootstrap 中data-[*] 属性的整理

vue2.0 根据状态值进行样式的改变展示方法

以上是使用vue中的v-for遍历二维数组的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
Vue3中的v-for函数详解:完美解决列表数据渲染 Vue3中的v-for函数详解:完美解决列表数据渲染 Jun 18, 2023 am 09:57 AM

随着数码技术的不断进步,前端开发已经成为一个越来越受欢迎的职业。而Vue3由于其简单易用、高效稳定的特性,成为了越来越多开发者的首选。其中,v-for函数是Vue3中用于列表数据渲染的核心函数之一。在这篇文章中,我们将对Vue3中的v-for函数进行详解,让你能够更好地运用它解决实际开发中的问题。一、基础语法v-for函数的基础语法如下:

Vue中使用v-for的最佳实践及性能优化方法 Vue中使用v-for的最佳实践及性能优化方法 Jul 17, 2023 am 08:53 AM

Vue中使用v-for的最佳实践及性能优化方法引言:在Vue开发中,使用v-for指令是非常常见的,它可以方便地将数组或对象的数据遍历渲染到模板上。然而,在处理大规模数据时,不当地使用v-for可能会导致性能问题。本文将介绍在使用v-for指令时的最佳实践,并提供一些性能优化方法。最佳实践:使用唯一的Key值Vue中使用v-for指令渲染每一项数据时,需要为

Java如何遍历文件夹并获取所有文件名 Java如何遍历文件夹并获取所有文件名 Mar 29, 2024 pm 01:24 PM

Java是一种流行的编程语言,具有强大的文件处理功能。在Java中,遍历文件夹并获取所有文件名是一种常见的操作,可以帮助我们快速定位和处理特定目录下的文件。本文将介绍如何在Java中实现遍历文件夹并获取所有文件名的方法,并提供具体的代码示例。1.使用递归方法遍历文件夹我们可以使用递归方法来遍历文件夹,递归方法是一种自身调用自身的方式,可以有效地遍历文件夹中

Vue 中使用 v-for 实现动态排序的技巧 Vue 中使用 v-for 实现动态排序的技巧 Jun 25, 2023 am 09:18 AM

Vue是一种现代化的JavaScript框架,它可以帮助我们轻松构建动态网页和复杂的应用程序。在Vue中,使用v-for可以轻松创建循环结构,对数据进行迭代渲染。而在一些特定的场景中,我们还可以利用v-for实现动态排序。本文将介绍如何在Vue中使用v-for实现动态排序的技巧,以及一些应用场景及示例。一、使用v-for进行简单

如何解决'[Vue warn]: v-for=”item in items”: item”错误 如何解决'[Vue warn]: v-for=”item in items”: item”错误 Aug 19, 2023 am 11:51 AM

如何解决“[Vuewarn]:v-for=”iteminitems”:item”错误在Vue开发过程中,使用v-for指令进行列表渲染是非常常见的需求。然而,有时候我们可能会遇到一个报错:"[Vuewarn]:v-for="iteminitems":item"。本文将介绍这个错误的原因及解决方法,并给出一些代码示例。首先,让我们来了解一下

vue中v-if和v-for哪个优先级高 vue中v-if和v-for哪个优先级高 Jul 20, 2022 pm 06:02 PM

在vue2中,v-for的优先级高于v-if;在vue3中,v-if的优先级高于v-for。在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费(每次渲染都会先循环再进行条件判断);想要避免出现这种情况,可在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。

PHP glob()函数使用示例:遍历指定文件夹中的所有文件 PHP glob()函数使用示例:遍历指定文件夹中的所有文件 Jun 27, 2023 am 09:16 AM

PHPglob()函数使用示例:遍历指定文件夹中的所有文件在PHP开发中,经常需要遍历指定文件夹中的所有文件,以实现文件批量操作或读取。PHP的glob()函数正是用来实现这种需求的。glob()函数可以通过指定一个通配符匹配模式,来获取指定文件夹中符合条件的所有文件的路径信息。在这篇文章中,我们将会演示如何使用glob()函数来遍历指定文件夹中的所有文件

Java Iterator 和 Iterable 的深入比较:优缺点分析 Java Iterator 和 Iterable 的深入比较:优缺点分析 Feb 19, 2024 pm 04:20 PM

概念差异:Iterator:Iterator是一个接口,代表一个从集合中获取值的迭代器。它提供了MoveNext()、Current()和Reset()等方法,允许你遍历集合中的元素,并对当前元素进行操作。Iterable:Iterable也是一个接口,代表一个可迭代的对象。它提供了Iterator()方法,用于返回一个Iterator对象,以便于遍历集合中的元素。使用方式:Iterator:要使用Iterator,需要先获得一个Iterator对象,然后调用MoveNext()方法来移动到下一

See all articles