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

Posted 2023-02-22

【中文标题】如何在 vuejs 中获取索引和计数

【英文标题】：how can get index & count in vuejs

【发布时间】：2016-06-20 19:22:20

【问题描述】：

我有code like this (JSFiddle)

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

输出： 该指数：0 该指数：1

我的问题是：

如何获得价值索引首先开始：例如 1 我想要 像这样的输出：这个索引：1这个索引：2 如何从索引中获取计数，即输出如下：此索引：1此索引：2此计数：2 字段

【问题讨论】：

简单说明：我会简单地使用$index，看起来更干净。 <li v-for="item in catalogs">this index : $index</li>

对于其他查看此问题的人，上述评论仅适用于 Vue 1。Vue 2 已放弃 $index 语法，转而支持显式声明索引。

【参考方案1】：

你可以加1

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

获取数组/对象的长度

 catalogs.length 

【讨论】：

规格有变化吗？现在看来是（目录，itemObjKey）......我们可能应该更新这个。

@Jonah 它有：vuejs.org/v2/guide/list.html#v-for-with-an-Object 想知道为什么我的“索引/键”是一个对象而“值”是一个数字！

【参考方案2】：

或者，您可以使用，

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

这工作得很好。

【讨论】：

(catalog, key) 必须用括号括起来

我建议使用索引而不是键，因为键并不总是数字。 @deathemperor 不必包装即可工作。

【参考方案3】：

可选的 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'
    
  
)

以下将打印出 key : value 对。 （你可以随意命名“每个”和“我”）

<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

【参考方案4】：

使用 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 提供了一个第二个可选参数引用当前项目的索引，您可以在您的 mustache 模板中为其添加 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>

希望对您有所帮助。

【参考方案5】：

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

【参考方案6】：

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

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/

【讨论】：

这个答案应该更接近顶部！

这就是我要找的。这应该是可以接受的答案。谢谢！

【参考方案7】：

这可能是一个肮脏的代码，但我认为它就足够了

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

在你的脚本上添加这个

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