v-for
- 可以額外顯示 index
- in 可改 of
index.html
<ul>
<li v-for="(item, index) of items">
{{item.message}}
</li>
</ul>
index.js
var app = new Vue({
el: '#app',
data: {
items: [
{ message: 'message 1' },
{ message: 'message 2' }
]
}
})
v-for 可和 Object 一起使用
- 可以額外顯示屬性名稱
- 可以額外顯示 index
- 順序是依照 Object.keys() 的順序, 不保證每個瀏覽器順序相同
- 建議和 "key" 屬性相互搭配,, 避免順序變動時, 顯示異常
index.html
<ul>
<li v-for="(value, name) in object">
{{value}}
</li>
</ul>
index.js
var app = new Vue({
el: '#app',
data: {
object: {
name: 'Shawn',
sex: 'male',
phone: '0912345678'
}
}
})
沒有留言:
張貼留言