vue.js（二）

继续前篇。

1.v-for

数组（对象数组）：

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

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

或者添加索引值：

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

浅显易懂，不多解释。

对象（Object）：

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

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

这里通过对象的键、值来访问对应的值。