使用vue中的v-for遍历二维数组的方法-js教程-PHP中文网

首页

web前端

js教程

使用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

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

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

Vue3中的v-for函数详解：完美解决列表数据渲染Jun 18, 2023 am 09:57 AM

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

如何解决“[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-for的最佳实践及性能优化方法Jul 17, 2023 am 08:53 AM

Vue中使用v-for的最佳实践及性能优化方法引言：在Vue开发中，使用v-for指令是非常常见的，它可以方便地将数组或对象的数据遍历渲染到模板上。然而，在处理大规模数据时，不当地使用v-for可能会导致性能问题。本文将介绍在使用v-for指令时的最佳实践，并提供一些性能优化方法。最佳实践：使用唯一的Key值Vue中使用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()函数使用示例：遍历指定文件夹中的所有文件Jun 27, 2023 am 09:16 AM

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

Vue3中的v-for函数：完美解决列表数据渲染Jun 19, 2023 am 08:04 AM

在Vue3中，v-for被视为渲染列表数据的最佳方式。v-for是Vue中的一个指令，它允许开发者遍历一个数组或对象，并为每个项生成一段HTML代码。v-for指令是开发者们可以使用的最强大的模板指令之一。在Vue3中，v-for指令得到了进一步的优化，使用更加简单，更加灵活。Vue3中的v-for指令最大的变化是元素的绑定。在Vue2中，使用v-for指令

Vue报错：无法正确使用v-for指令，怎么解决？Aug 17, 2023 pm 10:45 PM

Vue报错：无法正确使用v-for指令，怎么解决？在使用Vue开发过程中，经常会用到v-for指令来对数组或对象进行循环渲染。然而，有时候我们可能会遇到无法正确使用v-for指令的问题，并且会在控制台中看到类似的错误信息，如“Error:Cannotreadproperty'xxx'ofundefined”，这个问题通常在以下几种情况下出现：导入

See all articles