我有一个Vue组件,类似于below:
<div v-for="item in items" :key="there I want get the for-loop index" > </div> ... data(){ items: [{name:'a'}, {name:'b'}...] }
当我在vue.js中执行for循环时,我如何获得索引?
t8e9dugd1#
声明一个index变量:
index
<div v-for="(item, index) in items" :key="item.name"> </div>
演示:
new Vue({ el: '#app', data: { items: [{name: 'a'}, {name: 'b'}] } })
<script src="https://unpkg.com/vue"></script> <div id="app"> <div v-for="(item, index) in items" :key="item.name"> {{ index }}: {{ item.name }} </div> </div>
Official docs section -Map数组到元素v-for(强调我的):在v-for块中,我们可以完全访问父作用域属性。v-for还支持当前项的索引可选的第二个参数。
v-for
kqlmhetl2#
用途
v-for="(value,name,index) in Object"
对象
v-for="(value,index) in Array"
对于阵列
iq0todco3#
创建一个新方法:
methods: { incrementIndex(key) { return key + 1; }, },
如果数组键是编号的,从零开始,比如items[0],items[1],etc..,那么你可以使用数组的键:
items[0]
items[1]
etc..
<div v-for="(item, key) in items" :key="key"> {{ incrementIndex(key) }} </div>
但是如果数组的键是typeof String,那么你可以这样做:
typeof String
<div v-for="(item, key, index) in items" :key="key"> {{ incrementIndex(index) }} </div>
第二个版本使用来自v-for循环的counter。
counter
vohkndzv4#
你可以使用$index来获取v-for的索引。
$index
<div v-for="item in items" :key="`$index`" > </div>
另一种方法:
<div v-for="(item, index) in items" :key="index" > </div>
7eumitmz5#
**更新的答案::**你有索引数组为:"["aaaa","bbbbb"]"然后你这个脚本。
"["aaaa","bbbbb"]"
new Vue({ el: '#app', data: { items: ["aaaa","bbbbb"] } })
<script src="https://unpkg.com/vue"></script> <div id="app"> <div v-for="(item, index) in items" :key="index"> {{ index }} : {{ item }} </div> </div>
kqhtkvqz6#
<div v-for="(item, index ) in arrayData" :key="index"> <p>{{index+1}}</p> </div>
6条答案
按热度按时间t8e9dugd1#
声明一个
index
变量:演示:
Official docs section -Map数组到元素
v-for
(强调我的):在
v-for
块中,我们可以完全访问父作用域属性。v-for
还支持当前项的索引可选的第二个参数。kqlmhetl2#
用途
对象
对于阵列
iq0todco3#
创建一个新方法:
如果数组键是编号的,从零开始,比如
items[0]
,items[1]
,etc..
,那么你可以使用数组的键:但是如果数组的键是
typeof String
,那么你可以这样做:第二个版本使用来自
v-for
循环的counter
。vohkndzv4#
你可以使用
$index
来获取v-for的索引。另一种方法:
7eumitmz5#
**更新的答案::**你有索引数组为:
"["aaaa","bbbbb"]"
然后你这个脚本。kqhtkvqz6#