2016-03-07 46 views
13

我算code like this (JSFiddle)怎樣才能指標及在vuejs

<li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey}}</li> 

輸出
這個指數:0
此指數:1

我的問題是

  1. 我怎樣才能獲得價值指數第一次開始:1,例如
    我想 輸出是這樣的:
    此指數:1
    此指數:2

  2. 我怎樣才能從指數計算,即輸出是這樣的:
    該指數:1
    此指數:2
    這個數:2場
+0

簡單的評論:我只是簡單地使用'$ index',看起來更乾淨。 「

  • 此索引:{{$ index}}
  • ' – Cohars

    +1

    對於查看此問題的其他人,上述評論僅適用於Vue 1.Vue 2已將'$索引「的語法有利於顯式聲明索引。 –

    回答

    27

    你可以只加1

    <li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey + 1}}</li> 
    

    獲取數組的長度/對象

    {{ catalogs.length }} 
    
    8

    或者,你可以使用,

    <li v-for="catalog, key in catalogs">this is index {{++key}}</li> 
    

    這工作得很好。

    +0

    (目錄,鍵)必須包裹在圓括號中 – deathemperor

    2

    可選的第二個參數是指數,從0開始。因此,要輸出的陣列的所謂「some_list」的指數和總長度:

    <div>Total Length: {{some_list.length}}</div> 
    <div v-for="(each, i) in some_list"> 
        {{i + 1}} : {{each}} 
    </div> 
    

    如果不是列表,則是通過一個循環對象,那麼第二個參數是鍵/值對的關鍵字。因此對於對象'my_object':

    var an_id = new Vue({ 
        el: '#an_id', 
        data: { 
        my_object: { 
         one: 'valueA', 
         two: 'valueB' 
        } 
        } 
    }) 
    

    以下內容將打印出鍵值對。 (你能說出「每個」和「我」任何你想要的)

    <div id="an_id"> 
        <span v-for="(each, i) in my_object"> 
        {{i}} : {{each}}<br/> 
        </span> 
    </div> 
    

    有關Vue公司列表呈現更多的信息:https://vuejs.org/v2/guide/list.html

    1

    使用Vue的1.x中,使用特殊的變量$index像這樣:

    <li v-for="catalog in catalogs">this index : {{$index + 1}}</li> 
    

    或者,你可以像這樣v-for指令指定別名爲第一個參數

    <li v-for="(itemObjKey, catalog) in catalogs"> 
        this index : {{itemObjKey + 1}} 
    </li> 
    

    參見:Vue 1.x guide

    使用Vue公司2。X,v-for提供第二個可選的參數引用當前項目的索引,你可以在你的鬍子模板加1之前所見:

    <li v-for="(catalog, itemObjKey) in catalogs"> 
        this index : {{itemObjKey + 1}} 
    </li> 
    

    參見:Vue 2.x guide

    消除括號中v-for語法也正常工作因此:

    <li v-for="catalog, itemObjKey in catalogs"> 
        this index : {{itemObjKey + 1}} 
    </li> 
    

    希望有所幫助。

    0

    爲什麼要打印0,1,2 ...?

    因爲那些是數組中項目的索引,索引總是從0開始到array.length-1。

    要打印項目數而不是索引,請使用index+1。像這樣:

    <li v-for="(catalog, index) in catalogs">this index : {{index + 1}}</li> 
    

    ,並顯示出了總數使用array.length,就像這樣:

    <p>Total Count: {{ catalogs.length }}</p> 
    

    DOC

    V-用於還支持可選的第二參數(不是第一個) 當前項目的索引。