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~~