寫項目的時候，遇到過這樣一個問題，兩層循環，兩個index，我想得到一個連續的index用於賦值計算，想了一下，我們可以這樣實現（基於vue）
有一個多維數組，需要在最深層打印一個index，我希望這個index是連續的即，對於以下的代碼：
1 <ul id="example-1"> 2 <li v-for="item in items"> 3 <div v-for="v in item"> 4 {{index}} {{v}} 5 </div> 6 </li> 7 </ul>
在網上找了下，大致有以下幾種解決辦法
一：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <ul id="example-1"> 11 <li v-for="(item,index) in items"> 12 <div v-for="(v,index2) in item"> 13 {{myindex()}}{{v}} 14 </div> 15 </li> 16 </ul> 17 <script src="./vue.js"></script> 18 <script> 19 var indexnum = 0; 20 var example1 = new Vue({ 21 el: '#example-1', 22 data: { 23 items: [ 24 ['a', 'b', 'c'], 25 ['e', 'f'] 26 ] 27 }, 28 methods: { 29 myindex:function(n){ 30 indexnum++; 31 return indexnum; 32 } 33 } 34 }); 35 </script> 36 </body> 37 </html>
說明：這種方法不能再data中定義var出的 indexnum
在data里定義的話，return的是this.indexnum，改變this.indexnum導致視圖更新，視圖更新又導致for循環更新，myindex不斷執行，這樣就陷入了死循環了
二：
1 getIndex: function(pIndex, cIndex) { 2 var listId = 0; 3 for (var i = 0; i < pIndex; i++) { 4 listId += this.items[i].length; 5 } 6 listId = listId + cIndex + 1; 7 return listId; 8 }
說明：
通過傳入父數組遍歷到的索引pIndex(通過$parent.$index得到)，以及子數組的索引cIndex通過函數式編程得到，但是這種方法增加了計算量，不如一個自增的變量來的明了～