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

如下所示：

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'>
   <tr v-for='(item, index) in data'>
    <template v-for='items in item'>
     <template v-for='(itemss, indexs) in items' v-if='indexs !== "type"'>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>

其中，data数据为：

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

结果：

以上这篇使用vue中的v-for遍历二维数组的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js常用指令之循环使用v-for指令教程
  • 详解vuejs之v-for列表渲染
  • 浅谈vue.js中v-for循环渲染
  • vue.js指令v-for使用及索引获取
赞 (0)

相关推荐

  • Vue.js常用指令之循环使用v-for指令教程

    Vue.js常用指令之循环使用v-for指令教程

    前言 Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. v-for 可以绑定数据到数组来渲染一个列表: <div id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <sc

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="

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

    如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

  • C#使用foreach语句遍历二维数组的方法

    本文实例讲述了C#使用foreach语句遍历二维数组的方法.分享给大家供大家参考.具体分析如下: 如果通过for语句循环遍历二维数组需要两重循环才可以,二foreach语句只需要一次可以完全遍历整个二维数组,下面是代码演示 using System; public class w3demo{ public static void Main() { int sum = 0; int[,] nums = new int[3,5]; // give nums some values for(int i

  • PHP中遍历二维数组_以不同形式的输出操作实例

    如下所示: <body> <?php //定义二维索引数组 $arr = array( array("101","李军","男","1976-02-20","95033"), array("103","陆君","男","1974-06-03","95031"), array("10

  • PHP中使用foreach()遍历二维数组的简单实例

    第一种类型 想用foreach()遍历整个二维数组: $team = array('lk','ok'); $book = array('linux服务器配置与管理',$team); foreach($book as $k=>$val) //for $book each $value( as ) echo $k.'=>'.$val.''; 输出结果是: 0=>linux服务器配置与管理 1=>Array 当然,其实我是想要所有具体内容,而不是输出array... 所以应该采用如下做法

  • vue中使用vue-qriously插件生成二维码

    vue中使用vue-qriously插件生成二维码

    需求:项目中需要把链接地址生成二维码,用户扫描二维码就可以打开页面实现如下:使用了vue-qriously插件使用步骤: 安装 npm install vue-qriously --save-dev main.js入口文件中引入 import Vue from 'vue' import VueQriously from 'vue-qriously' Vue.use(VueQriously) 在vue文件中使用 <template> <qriously :value="baseU

  • vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

    目录 1.条形码插件jsbarcode 2.二维码插件 总结 1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 需要显示条形码的页面里 <img id="barcode1"> 调用构造函数生成条形码 let barCode1 = this.info.marIdCode; let barheight = this.imgHe

  • AngularJS使用ng-repeat遍历二维数组元素的方法详解

    AngularJS使用ng-repeat遍历二维数组元素的方法详解

    本文实例讲述了AngularJS使用ng-repeat遍历二维数组元素的方法.分享给大家供大家参考,具体如下: 问题: 最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是angularJS的前台框架,所以利用ng-repeat来实现. 实现方法: 首先在js中: $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y'

  • go for range遍历二维数组的示例

    go for range遍历二维数组的示例

    go for range 遍历二维数组 var arry [2][3] int for index,_ := range arry { fmt.Print(index) } 运行结果: 0 1   没有遍历所有的6个元素. 二维数组 arry 可以理解为:拥有两个 一维数组元素 的一维数组,所以以上只是遍历了其的两个元素,index分别是0 1,value是两个 拥有三个int类型元素 的一维数组. var arry [2][3] int for index,value := range arr

  • JavaScript动态创建二维数组的方法示例

    JavaScript动态创建二维数组的方法示例

    本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直 一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法 在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n

  • java String 转成Double二维数组的方法

    WHY 朋友在群里求助一个问题,问题原型是这样的: String str = "{{10.14, 11.24, 44.55, 41.01},{12.10, 14.21, 52.14, 50.44},{14.44, 16.12, 45.42, 47.55}}"; 转成double[][]{ {10.14, 11.24, 44.55, 41.01}, {12.10, 14.21, 52.14, 50.44}, {14.44, 16.12, 45.42, 47.55} } 也就是把一个可以转

随机推荐