如何获得索引和算在vuejs

Question

我有code like this (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开始。所以输出一个名为＆＃39; some_list＆＃39;的数组的索引和总长度：

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

如果不是列表，而是循环访问对象，则第二个参数是键/值对的键。因此对于对象＆＃39; my_object＆＃39;：

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

以下将打印出键：值对。 （你可以说出每个＆＃39;以及我想要的任何内容）

<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

Answer 5

使用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>

希望有所帮助。

Answer 6

  

为什么要打印0,1,2 ......？

因为它们是数组中项目的索引，索引总是从0开始到array.length-1。

要打印项目计数而不是索引，请使用SendErrorFilter。像这样：

run()

并显示总计数使用SendErrorFilter，如下所示：

index+1

根据 DOC ：

  

v-for还支持可选的第二个参数（不是第一个）   当前项目的索引。

Answer 7

这可能是一个肮脏的代码，但我认为可以满足要求

<div v-for="(counter in counters">
{{ counter }}) {{ userlist[counter-1].name }}
</div>

在您的脚本上添加这个

data(){return {userlist: [],user_id: '',counters: 0,edit: false,}},