遍历对象
遍历对象的语法形式和遍历数组是一样的，即value in object，其中object是被迭代的对象，value是被迭代的对象属性的别名
演示代码：
<template> <div id="app"> <ul> <li v-for="value in book">{{value}}</li> </ul> <router-view /> </div> </template> <script> export default { name: 'App', data() { return { book: { title: 'vue', author: 'gk', isbn: '6662241' } } } } </script>
运行结果：
如果要获取对象的属性名，可以使用可选的属性名参数作为第二参数
演示代码：
<template> <div id="app"> <ul> <li v-for="(value,key) in book">{{key}}:{{value}}</li> </ul> <router-view /> </div> </template> <script> export default { name: 'App', data() { return { book: { title: 'vue', author: 'gk', isbn: '6662241' } } } } </script>
运行结果：
遍历对象的表达式还可以使用第三个参数作为索引
演示代码：
<template> <div id="app"> <ul> <li v-for="(value,key ,index) in book">{{index}}-{{key}}:{{value}}</li> </ul> <router-view /> </div> </template> <script> export default { name: 'App', data() { return { book: { title: 'vue', author: 'gk', isbn: '6662241' } } } } </script>
运行结果：
对象更新检测
由于JavaScript的限制，vue不能检测对象属性的添加和删除。要解决这个问题，可以使用vue全局的set()和delete()方法来添加和删除属性，或者vue实例的set()和set()和set()和delete()方法来添加和删除属性，并触发视图更新。
<template> <div id="app"> <ul> <li v-for="(value,key ,index) in book">{{index}}-{{key}}:{{value}}</li> </ul> <button v-on:click="set()">添加属性</button> <button v-on:click="setdelete()">删除属性</button> <router-view /> </div> </template> <script> import Vue from 'vue' export default { name: 'App', data() { return { book: { title: 'vue', author: 'gk', isbn: '6662241' } } }, methods: { set() { Vue.set(this.book, 'sgg', '1233') }, setdelete() { Vue.delete(this.book, 'isbn') } } } </script>
运行结果：
key属性
为了个vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有的元素，需要为列表的每一项提供一个唯一key属性，key属性的类型只能是string和numder类型。
演示代码
<template> <div id="app"> <p>id:<input type="text" v-model="bookid"> s书名<input type="text" v-model="title"> <button v-on:click="add()">添加</button> </p> <p v-for="book in books" v-bind:key="book.id"> <input type="checkbox"> <span>id:{{book.id}},书名：{{book.title}}</span> </p> <router-view /> </div> </template> <script> export default { name: 'App', data() { return { bookid: 'a', title: 'a', books: [ { id: 1, title: 'vue' } ] } }, methods: { add() { this.books.unshift({ id: this.bookid, title: this.title }), (this.bookid = ''), (this.title = '') } } } </script>
运行结果：
