当前位置: 首页 > 文档资料 > Vue.js 教程 >

7.13.7 v-for

优质
小牛编辑
135浏览
2023-12-01
  • 预期:Array | Object | number | string
  • 用法:

基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键):

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-for 的详细用法可以通过以下链接查看教程详细说明。