Vue.js教程
1.8.1 数组的 v-for
阅读(

Vue.js 基础

Vue.js 安装

Vue.js 介绍

Vue.js 实例

Vue.js 模板语法

Vue.js 计算属性和侦听器

Vue.js Class 与 Style 绑定

Vue.js 条件渲染

Vue.js 列表渲染

数组的 v-for

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。

<ul id="example-1">
  <li v-for="item in items">{{ item.message }}</li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果:

  • {{ item.message }}

v-for块中,我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果:

  • {{ parentMessage }} - {{ index }} - {{ item.message }}

你也可以用of替代in作为分隔符,因为它是最接近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验