## 列表渲染 ### 数组渲染 ~~~ <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 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。 ~~~ <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> ~~~ ~~~ var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ~~~  你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法： ~~~ <div v-for="item of items"></div> ~~~ ### 对象渲染 ~~~ <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> ~~~ ~~~ new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) ~~~  你也可以提供第二个的参数为键名 ~~~ <div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> ~~~ 第三个参数为索引： ~~~ <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> ~~~ ### key 当 Vue.js 用v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。 ~~~ <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> ~~~ 建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途。 ### 课后习题 1.将如下数据渲染到页面上 ~~~ let news = [ {title:'新闻1', time: '2012-12-1', author: 'ADMIN'}, {title:'新闻2', time: '2012-12-2', author: 'JACK'}, {title:'新闻3', time: '2012-12-3', author: 'BOB'}, {title:'新闻4', time: '2012-12-4', author: 'ADMIN'}, {title:'新闻5', time: '2012-12-5', author: 'ADMIN'} ] ~~~ 排版效果类似于下面的效果，且隔行文字颜色不一样，奇数行红色，偶数行绿色 * 新闻1 2012-12-1 ADMIN * 新闻2 2012-12-2 JACK * 新闻3 2012-12-3 BOB * 新闻4 2012-12-4 ADMIN * 新闻5 2012-12-5 ADMIN