directive: v-for

by edith_tang

HTML

<div id="app">
  <ul>
  <!-- 
    1. 如何理解：books 是实例中的数据，book是数组中的元素的别名，循环出的每个<li>都可以访问对对应的当前数据 book
    2. 也可依用book of books
  -->
    <li v-for="book in books">{{ book.name }}</li>
  </ul>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	books: [
    	{ name: 'Love in the time of cholera'},
      { name: 'Wuthering Heights' },
      { name: 'Becoming' }
    ]
  }
})