2019年9月19日 星期四

[Vue] 列表渲染

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'
     }
}
})


沒有留言:

張貼留言