【VueJS】v-for的索引获取

本文主要是介绍【VueJS】v-for的索引获取，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在Vue1.x版本中

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

<div id="app"><ul v-for="tab in tabs"><li>{{$index}} {{tab.name}}</li></ul>
</div><script>var app = new Vue({el: "#app",data() {return {tabs: [{name: '滴滴'},{name: '易到'},{name: '神州'}]}}})
</script>

运行结果：

• 0 滴滴
• 1 易到
• 2 神州

在Vue2.x版本中

2.x开始，删除了 v-for 指令当中的 $index

如果需要使用，须在 v-for 指令当中添加需要的参数

<div id="app"><div v-for="(tab, index) in tabs"><ul ><li> {{index}} {{tab}} </li></ul></div>
</div><script>var app = new Vue({el: "#app",data() {return {tabs: ['滴滴','易到','神州']}}})
</script>

运行结果：

• 0 滴滴
• 1 易到
• 2 神州

<div id="app"><div v-for="(tab, index) in tabs"><ul ><li>{{index}} {{tab.name}}</li></ul>
</div>
</div><script>var app = new Vue({el: "#app",data() {return {tabs: [{name: '滴滴'},{name: '易到'},{name: '神州'}]}}})
</script>

运行结果：

• 0 滴滴
• 1 易到
• 2 神州

这篇关于【VueJS】v-for的索引获取的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---