this index..."> this index..."/> this index..."> this index...">

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

vue.js Vue.js

达蒙樱梅

2020-03-11

我有这样的代码(JSFiddle)

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

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

我的问题是

  1. 我如何首先获取值索引:1例如,
    我想要这样的输出:
    该索引:1
    该索引:2

  2. 我如何从索引中获取计数,即输出如下:
    此索引:1
    此索引:2
    此计数:2字段

第707篇《如何在vue.js中获取索引和计数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
EvaPro 2020.03.11

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

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

在您的脚本上添加此一个

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

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

希望能有所帮助。

斯丁逆天A 2020.03.11

另外,您也可以使用

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

这很好用。

西门飞云泡芙 2020.03.11

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

梅Sam路易 2020.03.11

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

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/

小哥番长番长 2020.03.11

你可以只加1

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

获取数组/对象的长度

{{ catalogs.length }}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android