如何在vue.js中获取索引和计数

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

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

在您的脚本上添加此一个

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

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

使用Vue 2.x，v-for提供了第二个可选参数来引用当前项目的索引，您可以在胡子模板中为其添加1，如前所示：

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

请参阅：Vue 2.x指南

因此，消除v-for语法中的括号也可以：

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

希望能有所帮助。

另外，您也可以使用

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

这很好用。

为什么打印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-for还为当前项目的索引支持可选的第二个参数（不是第一个）。

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

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/

你可以只加1

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

获取数组/对象的长度

{{ catalogs.length }}