iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 11

[前端暴龍機,Vue2.x 進化 Vue3 ] Day11.列表渲染

當我們有很多重復的架構,內容卻不一樣,以舊有無框架的開發,我們可能就需要手動一筆一筆的刻出來,更進步一點,會透過複製+貼上~再來更改內容(像是成績單,訂單,或者通訊錄等等)
現在,Vue 提供了列表渲染,讓這些架構一樣的更方便我們輕鬆撰寫

列表渲染 v-for

<span v-for="自定義變數名稱 in 要被渲染的數據" :key="綁定數據的唯一值">{{ 自定義變數名稱(或者是自定義變數名稱.key值[Object]) }}</span>

v-for 裡面的 :key 記得必需加上

以通訊錄來看,就像下面的範例
https://ithelp.ithome.com.tw/upload/images/20210816/201207222yds8PkS1R.jpg

<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>

https://ithelp.ithome.com.tw/upload/images/20210816/20120722uot3vBtIJi.jpg
以範例來看,當數據為陣列來說,第二個參數 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>

https://ithelp.ithome.com.tw/upload/images/20210816/201207223XViIhjfqQ.jpg
以範例來看,當數據為物件來說,第二個參數 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 官方文件 - 列表渲染


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day10.條件渲染
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day12.事件處理
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言