[前端暴龙机，Vue2.x 进化 Vue3 ] Day11.列表渲染

当我们有很多重复的架构，内容却不一样，以旧有无框架的开发，我们可能就需要手动一笔一笔的刻出来，更进步一点，会透过复制+贴上~再来更改内容(像是成绩单，订单，或者通讯录等等)
现在，Vue 提供了列表渲染，让这些架构一样的更方便我们轻松撰写

列表渲染 v-for

<span v-for="自定义变数名称 in 要被渲染的数据" :key="绑定数据的唯一值">{{ 自定义变数名称(或者是自定义变数名称.key值[Object]) }}</span>

v-for 里面的 :key 记得必需加上

以通讯录来看，就像下面的范例

<div id="app">
    <ul>
        <li v-for="i in lists" :key="i.id">
            {{i.name}} - {{i.phone}} - {{i.city}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            lists: [
                { name: 'tom', id: 1, phone: "0912345678", city: '台北' },
                { name: 'jerry', id: 2, phone: "0912345000", city: '台中' },
                { name: 'ted', id: 3, phone: "0912345123", city: '台南' },
                { name: 'kim', id: 4, phone: "0912345888", city: '高雄' },
            ]
        }
    })
</script>

是不是更方便且简洁呢?
另外，通常要被渲染的数据会像前几篇的 computed 所提到的，会先过滤出来，来後用来使用渲染 点我复习

v-for 的第二个参数

1 .Array Data

<div id="app">
    <ul>
        <li v-for="(item,index) in lists" :key="item.id">
            {{ index }} - {{item.name}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            lists: [
                { name: 'tom', id: 1, phone: "0912345678", city: '台北' },
                { name: 'jerry', id: 2, phone: "0912345000", city: '台中' },
                { name: 'ted', id: 3, phone: "0912345123", city: '台南' },
                { name: 'kim', id: 4, phone: "0912345888", city: '高雄' },
            ]
        }
    })
</script>

以范例来看，当数据为阵列来说，第二个参数 index 会是当前项目的索引值，从 0 开始计算

2. Object Data

<div id="app">
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ index }} - {{ item.phone }}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: {
                Mary: {
                    phone: "0912345678"
                },
                sandy: {
                    phone: "0912345123"
                }
            }
        }
    })
</script>

以范例来看，当数据为物件来说，第二个参数 index 会是当前项目的物件的 key

注意 !!
Object Data 还可以再接第三个参数

<li v-for="(item, index, name) in items">
    {{ index }} - {{ name }}- {{ item.phone }}
</li>

此时，命名就很重要，因为主要是依照顺序，而不是照我们的命名自动匹配
<li v-for="(被渲染的每一个项目, Object-key, 索引值) in items">

v-for 单纯的数字渲染

<span v-for="n in 10" :key="n">{{ n }} </span> // 1 2 3 4 5 6 7 8 9 10

此时的 n ，会是从 1 开始计算

v-for 与 v-if

注意 Vue 官方文件有提到，不推荐 v-for 与 v-if 在同一个元素上使用
因为 v-for 的优先级会比 v-if 要高，意味着每次跑 for 循环，就会跑一次 if 判断

参考资料

Vue 官方文件 - 列表渲染