Vue.js: 列表渲染v | vue slice
27Apr2017v-for使用v-for迭代陣列或物件中的元素。例1:陣列使用v-for迭代陣列中的元素。如下所示,list是一個陣列,item代表用於迭代的元素,使用item.id或item.name可帶出屬性。其中第二個參數index是索引值(optional)。
使用 v-for 迭代陣列或物件中的元素。
例 1:陣列使用 v-for 迭代陣列中的元素。如下所示,list 是一個陣列,item 代表用於迭代的元素,使用 item.id 或 item.name 可帶出屬性。其中第二個參數 index 是索引值 (optional)。
<div id="app"> <ul> <li v-for="(item, index) in list"> index: ${ index }, name: ${ item.name } </li> </ul> </div> var vm = new Vue({ el: #app, delimiters: [${, }], data: { list: [ { id: 123456789, name: 選項 1 }, { id: 234567890, name: 選項 2 }, { id: 345678901, name: 選項 3 }, ], }, }); // 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。渲染結果如下。
例 2:物件使用 v-for 迭代物件中的元素。第二個參數 key 是鍵值,第三個參數 index 是索引值,皆為 optional。
<div id="app"> <ul> <li v-for="(item, key, index) in list"> index: ${ index }, key: ${ key }, name: ${ item.name } </li> </ul> </div> var vm = new Vue({ el: #app, delimiters: [${, }], data: { list: { 1234567...