【vue】模板中的列表渲染(v-for)

[Kelichao]

基本用法

数据为数组

<ul id="example-1">
<!--items为data中的对象名，item指的是数组中的第几个，message为当前第几个对象中的键值名-->
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

template形式的用法

<ul id="example-1">
<!--items为data中的对象名，item指的是数组中的第几个，message为当前第几个对象中的键值名-->
<template  v-for="item in items">
  <li>
    {{ item.message }}
  </li>
</template>
</ul>

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

数据为对象

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})