v-for_update_computed

by edith_tang

HTML

<!-- 用数组副本来更新视图 -->

<div id="app">
  <ul>
    <template v-for="book in filterBooks">
        <li> 书名：{{ book.name }} </li>
        <li> 作者：{{ book.author }} </li>
    </template>
  </ul>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	books: [
    	{
      	name: 'Love in the time of cholera',
        author: 'Gabriel García Márquez'
      },
      {
      	name: 'Wuthering Heights',
        author: 'Emily Bronte'
      },
      {
      	name: 'Becoming',
        author: 'Michelle Obama'
      },
      {
      	name: 'One Hundred Years of Solitude',
        author: 'Gabriel García Márquez'
      }
    ]
  },
  computed: {
  	filterBooks: function() {
    	return this.books.filter(function(book) {
      	return book.author.match(/Gabriel/);
      })
    }
  }
})