VUE學習十七，列表渲染v-for
阿新 • • 發佈：2021-07-08
一、我們可以用 v-for 指令基於一個數組來渲染一個列表。
<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul>
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
二、v-for 還支援一個可選的第二個引數，即當前項的索引。
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
三、在 v-for 裡使用物件
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>
new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
也可以提供第二個的引數為 property 名稱 (也就是鍵名)：
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
還可以用第三個引數作為索引：
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
四、整體程式碼參考
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE簡單示範</title> <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script> </head> <body> <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> </ul> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }) </script> </body> </html>
本文參考：
https://cn.vuejs.org/v2/guide/list.html