vuejs—循环

上一篇 介绍了vue.js实现条件渲染，这篇我们一起学习同样十分常见的循环。

• v-for

<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' }
    ]
  }
})

在 v-for块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

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

• template v-for
  类似于 template v-if，也可以将 v-for用在 <template>标签上，以渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

数组相关操作：

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。
例如：example1.items.push({ message: 'Baz' })。

• 对象遍历

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ $key }} : {{ value }}
  </li>
</ul>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

也可以给对象的键提供一个别名:

<div v-for="(key, val) in object">
  {{ key }} {{ val }}
</div>

• 值域v-for
  v-for也可以接收一个整数，此时它将重复模板数次。

<div>
   <span v-for="n in 10">{{ n }} </span>
</div>

下一篇文章，我们将一起学习方法与事件处理器。