如何在vuejs中获取索引和计数

Question

我有这样的代码(JSFiddle)

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

输出:
此索引:0
此索引:1

我的问题是:

1. 我怎样才能首先得到价值指数:1例如
   我想要这样的输出:
   这个指数:1
   这个指数:2
   
   
2. 如何从索引中获取计数,即输出如下:
   此索引:1
   此索引:2
   此计数:2字段
   

Answer 1

你可以加1

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

获取数组/对象的长度

{{ catalogs.length }}

Answer 2

或者,你可以使用,

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

这工作得很好.

Answer 3

如果您的数据采用以下结构,则将字符串作为索引

items = {
   am:"Amharic",
   ar:"Arabic",
   az:"Azerbaijani",
   ba:"Bashkir",
   be:"Belarusian"
}

在这种情况下,您可以使用额外的变量来获取索引的数量:

<ul>
  <li v-for="(item, key, index) in items">
    {{ item }} - {{ key }} - {{ index }}
  </li>
</ul>

资料来源:https://alligator.io/vuejs/iterating-v-for/

Answer 4

可选的SECOND参数是索引,从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