$index是Vue2.0中新增的指令,用于獲取當前循環的索引位置,在v-for指令中使用。
使用$index可以輕松地獲取當前循環中的索引位置,常用于渲染列表、表格等需要顯示序號的場景。
<template> <div> <ul> <li v-for="(item, $index) in items" :key="item.id"> {{ $index + 1 }}. {{ item.name }} </li> </ul> </div> </template> <script> export default { data () { return { items: [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' } ] } } } </script>
在上述代碼中,v-for指令中的$index即為當前循環中的索引位置,通過{{$index + 1}}可以輕松地獲取當前序號。
需要注意的是,在使用$index時,Vue會對其進行轉換,實際上是生成一個與items相同長度的數組,并添加一個序號屬性,再將此數組與items一同遍歷。因此,在性能上并不會有過多損耗。使用$index可以使代碼更加簡潔易讀,值得推薦使用。