Vue.js教程
7.13.7 v-for
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

全局配置

全局API

选项 / 数据

选项 / DOM

选项 / 生命周期钩子

选项 / 资源

选项 / 组合

选项 / 其它

实例属性

实例方法 / 数据

实例方法 / 事件

实例方法 / 生命周期

指令

v-else-if

v-else

v-if

v-show

v-html

v-text

v-for

  • 预期: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 的详细用法可以通过以下链接查看教程详细说明。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验