## 列表渲染 ### 數組渲染 ~~~ <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