v-for 语法
时间: 2023-06-29 17:21:00 浏览: 45
v-for 是 Vue.js 中用于循环渲染列表数据的指令,其基本语法如下:
```html
<div v-for="item in items" :key="item.id">
{{ item }}
</div>
```
其中,v-for 后面的 item 表示当前循环的数据项,在每次循环中会自动更新为下一个数据项;items 则是要循环的数据列表;:key="item.id" 是为了提高性能而设置的,它用于帮助 Vue.js 区分不同的列表项,避免重复渲染。{{ item }} 则是要渲染的内容,可以是任意的 HTML 或 Vue.js 模板代码。
v-for 还支持在循环中获取当前项的索引、键名、父级数据等信息,具体语法如下:
```html
<div v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item }}
</div>
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>
<div v-for="item in items" :key="item.id">
<div v-for="subItem in item.subItems" :key="subItem.id">
{{ subItem }} - {{ item }}
</div>
</div>
```
其中,(item, index) 表示获取当前项的值和索引,(value, key) 表示获取当前项的值和键名,item.subItems 表示获取当前项的子级数据列表。在循环中使用这些语法可以更加灵活地操作数据。