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...
首先来看一个例子
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~~
更多推荐
所有评论(0)