vue 中 v-for 遍历 二维 对象数组
首先来看一个例子
var a = {};
var b = [];
var i =0;
while(i<10){b[i] = a[i] = i++;
}
console.log('a '+typeof a +' b '+ typeof b); //a object b object 注:数组也是对象
console.log(a); //{ '0': 0,'1': 1,'2': 2,'3': 3,'4': 4,'5': 5,'6': 6,'7': 7,'8': 8,'9': 9 }
console.log(b); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log('a.length '+a.length+ ' b.length '+b.length); //a.length undefined b.length 10
/*在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。
对于数组、函数、对象来说,其关系错综复杂,使用 typeof 都会统一返回 “object” 字符串
JavaScript中,通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型。*/
console.log(Object.prototype.toString.call(a));//[object Object]
console.log(Object.prototype.toString.call(b));//[object Array]
Object.prototype.toString方法返回的内置类型
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call(‘123’)) //[object String]
console.log(Object.prototype.toString.call(undefined))
//[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]
在这一句 console.log(‘a.length ‘+a.length+ ’ b.length ‘+b.length); 中,a 是没有 length属性的(类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为它是类数组对象),所以会输出undefined
而我们在vue的data里用的数据是这样的
data : [[{name: 'best',age:19},{name: 'jhon',age:19}],[{name: 'site',age:19},{name: 'hyte',age:19}],]
1.假如我们这样写
<table cellpadding="0" cellspacing="0" ><tr v-for='item in data' :key="item">{{item}}</tr>
</table>
会这样输出,这是遍历一维数组 |
---|
[ { “name”: “best”, “age”: 19 }, { “name”: “jhon”, “age”: 19 } ] |
[ { “name”: “site”, “age”: 19 }, { “name”: “hyte”, “age”: 19 } ] |
2.假如我们这样写
<table cellpadding="0" cellspacing="0" ><tr v-for='item in data' :key="item"><template v-for='value in item'>{{value}}</template></tr>
</table>
这是遍历每一个二维数组 |
---|
{ “name”: “best”, “age”: 19 } { “name”: “jhon”, “age”: 19 } |
{ “name”: “site”, “age”: 19 } { “name”: “hyte”, “age”: 19 } |
3.假如我们这样写
<table cellpadding="0" cellspacing="0" ><tr v-for='item in data' :key="item"><template v-for='value in item'><template v-for='v in value'><td :key="v">{{v}}</td></template></template></tr>
</table>
这是遍历每一个对象,这个地方不太好理解,其实就是把每个对象的 value 给遍历出来了,多理解一下就好了 |
---|
best 19 jhon 19 |
site 19 hyte 19 |
Go~~
vue 中 v-for 遍历 二维 对象数组相关推荐
- 二维数组更改vue_使用vue中的v-for遍历二维数组的方法
如下所示: {{itemss}} 其中,data数据为: this.data = [ [ { type: '', name: '资产', start: '期末余额', end: '期初余额' }, { ...
- vue中使用qrcode生成二维码并实现打印功能
问题产生背景: 客户要求根据表格中选中的数据产生对应的二维码并可以利用打印机打印出来 必要条件:vue.需要安装qrcode和vue-print-nb依赖(具体安装可自行百度) 实现思路: 当用户勾选 ...
- vue中使用qrcode 生成二维码
一 安装qrcode.js npm install --save qrcode 二. 封装生成二维码的组件 index.vue <template><div class=" ...
- vue中使用qrcode生成二维码
下载qrcode插件 npm install qrcodejs2 --save 单文件引入使用 import QRCode from 'qrcodejs2' 使用 <template>&l ...
- java二维对象数组_java 二维数组和对象数组
1.二维数组:二维数组就是存储一维数组(内存地址/引用)的数组 2.二维数组的初始化 1) int intA[][]={{1,2},{2,3},{3,4,5}}; 2) int [][] intB=n ...
- java二维对象数组存入文件_关于Java:将2D数组保存到磁盘文件
我目前正在开发一个基本的国际象棋程序,该程序允许用户保存当前游戏并稍后再返回并从上次停止的地方接机. 唯一的问题是我不知道如何将2d数组保存到磁盘文件. 我感到更加困惑的是,该代码集需要单独写入每个值 ...
- JavaScript - 根据指定下标删除数组中的元素(支持二维对象数组)
前言 网上的大部分方法及原生 splice 都存在一定的问题,本文做一个函数封装,传入数组及下标即可自动完成移除. 很多时候,我们需要移除指定下标的数组元素, 例如我有一个数组 ['A', 'B'] ...
- js 将二维对象数组转换成树状结构数据
const list = [{ id: 2, key: { id: 1, name: '测试' }, value: { id: 2, name: 'waer' } },{ id: 3, key: { ...
- PHP二维关联数组的遍历方式
采用foreach循环对二维索引数组进行遍历,相对来讲速度更快,效率更高,foreach循环是PHP中专门用来循环数组的. 实例也相对简单,多加练习,想清楚程序运行逻辑即可. <?php$arr ...
最新文章
- java删除页面数据不刷新_Ajax请求数据与删除数据后刷新页面
- switch使用中遇到的问题
- java canvas类_java中的canvas类有什么作用?
- 【Todo】【转载】Scala中Array, List, Tuple的区别
- 代码修改及模型复查 12-6
- Axure 安装图标字体元件库
- ggplot2设置坐标轴范围_ggplot2——双坐标轴?
- 合宙Air105|Socket|UDP |TCP/IP|W5500|Serial 串口|透传|DTU|网络测试助手|双机互联|内网测试|官方demo|学习(8-3):Socket网络接口-双机互联透传
- 深度丨详解 Amazon Go 三大核心技术
- Adobe国际认证中文官网
- Qt项目移植出现的问题(No rule to make target ‘……’, needed by ‘……’. Stop.)
- [JAVA]用数学解释数组移步问题(新增对链表移步的解释)
- Axure的页面交互
- rhel6系统服务-最全
- 导入jar到Maven本地仓库
- MySql优化之路(一)--- 字段的设计和类型选择
- 更改keil主题颜色背景
- MSP430单片机各种寄存器总结(1)——CPU 寄存器
- vue中的key的作用?
- C# word或者excel保存或导出为PDF