列表渲染

用 `v-for` 把一个数组对应为一组元素(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' }

    ]

  }

})

结果：
　　　　.Foo
　　　　.Bar

　　在 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' }

    ]

  }

})

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

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

在 `v-for` 里使用对象

你也可以用 v-for 来遍历一个对象的属性。

<ul id="v-for-object" class="demo">

  <li v-for="value in object">

    {{ value }}

  </li>

</ul>

new Vue({

  el: '#v-for-object',

  data: {

    object: {

      title: 'How to do lists in Vue',

      author: 'Jane Doe',

      publishedAt: '2016-04-10'

    }

  }

})

结果：

你也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">

  {{ name }}: {{ value }}

</div>

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">

  {{ index }}. {{ name }}: {{ value }}

</div>

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

巴特西

14 Vue列表渲染

列表渲染

用 `v-for` 把一个数组对应为一组元素(for循环)

在 `v-for` 里使用对象

维护状态

最新文章

热门文章

巴特西

14 Vue列表渲染

列表渲染

用 v-for 把一个数组对应为一组元素(for循环)

在 v-for 里使用对象

维护状态

最新文章

热门文章

用 `v-for` 把一个数组对应为一组元素(for循环)

在 `v-for` 里使用对象