2023鐵人賽＿Vue2基本使用規則(Day10)-列表渲染

2023 iThome 鐵人賽

DAY 10

自我挑戰組

Vue2 初步認識以及基本使用規則 && 了解 Vue2 的基本原理系列第 10 篇

15th鐵人賽 vue2 列表渲染

yuchen1226

團隊大壯們的首次鐵人賽

2023-09-10 13:25:04

361 瀏覽

分享至

本章節會提及如何使用Vue指令
v-for
使用時機在清單的呈現上
可以遍歷data中的陣列數據

列表渲染

用於展示列表數據
語法 : v-for : “(val, index) in xxx” :key=”yyy”
可遍歷 : 數組, 對象, 字符串, 指定次數

語法中的val即是代表
陣列中數據的名稱宣告
val可以自定義命名

index即是每一行陣列的順序從0開始
不一定需要添加, 但val則是必須宣告

key其代表的跟index不一樣
為清單中的每一行對象的編號宣告
其性質跟id是一樣的
不可重複

<body>
    <div id="root">
        <h2>動物列表</h2>
        <ul>
            <li v-for="(animel, index) of animel" :key="animel.id">
                {{index + 1}}. {{animel.name}} - {{animel.age}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                animel : [
                    {id : "001" , name : "dog", age : 3 },
                    {id : "002" , name : "cat", age : 5 },
                    {id : "003" , name : "bird", age : 1}
                ]
            }
        })
    </script>
</body>

從圖片中可以發現
v-for的使用可以將數據一設計好的格式呈現到頁面上
每一行對象都會帶有data陣列中的每一筆數據

搜尋功能

監視屬性

<body>
    <div id="root">
        <h2>動物列表</h2>
        <div>
            <label>查詢 : </label>
            <input type="text" v-model="keyword" />
        </div>
        <ul>
            <li v-for="(animel, index) of animelFilter" :key="animel.id">
                {{index + 1}}.</br> 
                英文名:{{animel.name}}</br>
                中文名:{{animel.cname}}</br>
                年紀:{{animel.age}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                keyword : "",
                animelFilter : [],
                animel : [
                    {id : "001" , name : "dog", cname : "狗", age : 3 },
                    {id : "002" , name : "cat", cname : "貓", age : 5 },
                    {id : "003" , name : "bird", cname : "鳥", age : 1},
                    {id : "004" , name : "lion", cname : "獅子", age : 8}
                ]
            },
            watch : {
                keyword : {
                    immediate : true,
                    handler(val) {
                        this.animelFilter = this.animel.filter((a)=>{
                            return a.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })
    </script>
</body>

上方即是程式碼範例
animelFilter在data中的配置中即是畫面上的使用
animel代表的像是接受到的數據
會用這樣的配置結構是為了讓搜尋結果不影響到一開始的數據結果
利用animel查詢到的結果放置在animelfilter上
畫面的顯示結果久能打到搜尋效果

整理
immediate → 再輸入關鍵字前就要回傳需要的資料
handler → 對輸入的新資料做搜尋處理
animelFilter → 創建一個新的物件做過濾後的資料回傳 (為了不變動 animel的基本資料)

計算屬性

在中替換成以下程式碼

<script>
    var vm = new Vue({
        el : "#root",
        data : {
            keyword : "",
            animel : [
                {id : "001" , name : "dog", cname : "狗", age : 3 },
                {id : "002" , name : "cat", cname : "貓", age : 5 },
                {id : "003" , name : "bird", cname : "鳥", age : 1},
                {id : "004" , name : "lion", cname : "獅子", age : 8}
            ]
        },
        computed : {
            animelFilter() {
                return this.animel.filter((a)=>{
                    return a.name.indexOf(this.keyword) !== -1
                })
            }
        }
    })
</script>

上方程式碼能達到的效果跟watch是一樣的
但差別在於animelFilter配置為計算屬性
在列表渲染中也可使用上計算屬性

比較
能減少多餘的程式碼
並且比起watch來說,data中的配置更加乾淨

排序功能

在計算屬性取得回傳前都可以做資料的調整,建立button改變數據順序狀態

<body>
    <div id="root" class="m-2">
        <h2>動物列表</h2>
        <div>
            <label>查詢 : </label>
            <div class="input-group">
                <input type="text"  v-model="keyword" />
                <input type="button" @click="sortTpe = 1"  value="升序" />
                <input type="button" @click="sortTpe = 2"  value="降序" />
                <input type="button" @click="sortTpe = 0"  value="原順序" />
            </div>
        </div>
        <ul>
            <li v-for="(animel, index) of animelFilter" :key="animel.id">
                {{index + 1}}.</br> 
                英文名:{{animel.name}}</br>
                中文名:{{animel.cname}}</br>
                年紀:{{animel.age}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                keyword : "",
                sortTpe : 0,
                animel : [
                    {id : "001" , name : "dog", cname : "狗", age : 3 },
                    {id : "002" , name : "cat", cname : "貓", age : 5 },
                    {id : "003" , name : "bird", cname : "鳥", age : 1},
                    {id : "004" , name : "lion", cname : "獅子", age : 8}
                ]
            },
            computed : {
                animelFilter() {
                    var arr = this.animel.filter((a)=>{
                        return a.name.indexOf(this.keyword) !== -1
                    })
                    if (this.sortTpe != 0) {
                         arr.sort((val, val2)=>{
                            return this.sortTpe === 1 ?
                            val.age-val2.age : val2.age-val.age
                         })
                    }
                    return arr;
                }
            }
        })
    </script>
</body>

配置一個順序狀態的對象
在button的@click內直接異動sortTpe得value值
這樣簡單的判斷就不需要特別配置methods就可以簡單達成
最後再從計算屬性中添加順序的邏輯就可以達到排序的功能

以上即是列表渲染的使用方式
下一章節會提及列表選染中key的重要性
其在虛擬DOM中做到的事情