以下是一些关于 v-for 的基本用法:
1. 遍历数组
使用 v-for 遍历数组,将数组中的每个元素渲染到模板中。
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
其中,item 是数组中的当前元素,你可以自定义变量名。
2. 获取索引
如果需要获取元素的索引,你可以使用 (item, index) 的语法。
<ul>
<li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
</ul>
3. 遍历对象
使用 v-for 遍历对象,将对象的每个属性值渲染到模板中。
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
4. 遍历整数范围
你还可以使用 v-for 遍历一个整数范围。
<ul>
<li v-for="n in 5">{{ n }}</li>
</ul>
5. v-for 的 key
在使用 v-for 进行循环渲染时,Vue 鼓励为每个项提供一个唯一的 key 属性,以便 Vue 可以更有效地追踪每个项的变化。这对于优化列表渲染时很重要。
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
确保 :key 是唯一的,不建议使用索引作为 key,特别是在可能发生数组变化的情况下。
这是一些关于 v-for 的基本用法。v-for 还有其他一些高级用法,比如在嵌套循环中使用 v-for、使用 v-for 遍历对象的属性值等。你可以在 [官方文档](https://v3.vuejs.org/guide/list.html#v-for-with-an-object) 中查阅更多详细信息。
转载请注明出处:http://www.zyzy.cn/article/detail/12978/Vue3