Day5 Vue指令- 屬性綁定與列表渲染

2025 iThome 鐵人賽

DAY 5

Vue.js

新手學習Vue.js與實作之旅系列第 5 篇

17th鐵人賽

zhiz

2025-09-10 22:14:00

54 瀏覽

分享至

昨天介紹如何透過使用插值表達式 {{ }} 動態更換文本內容，今天將繼續介紹如何透過Vue指令來更換 HTML 標籤的「屬性」～

屬性綁定 v-bind

將 HTML 屬性綁定到 Vue 實例中的資料，以實現動態變更屬性值，常見的標籤屬性如: id、class、href(連結)、src(圖片)、style(樣式)等DOM屬性，都可以透過此語法來變換內容，此外，由於此語法使用很頻繁，因此常以：(冒號)作為簡寫。

基本語法：

<div v-bind:屬性名稱="Vue資料屬性"></div>

舉例語法：

<a v-bind:href="url">Link</a> 等同於 <a :href="url">Link</a>

接下來要介紹列表渲染並且搭配key的方法～

列表渲染v-for

用於遍歷陣列或物件資料，可以動態產生多個相同結構的元素。
基本語法：

<li v-for="item in items">{{ item }}</li>

帶索引的寫法：

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

key的重要性

在面對具有大量資料的情況下，當某個資料被刪除造成順序發生變化，使用key 值作為 v-for 的唯一識別碼，讓Vue可以修改特定的元素，並且確保它呈現在該特定 key 值內容，除非資料量很少或簡單，否則建議使用 v-for 都要搭配key 屬性。

接下來的範例是使用Options API結合以上兩種語法的應用

P.S. 我在練習範例程式碼時，是利用引入CDN的方式來撰寫Vue哦
範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div class="list">
        <h3>音樂串流平台</h3>
        <ul>
            <li v-for="link in links" v-bind:key="link.name">
            <a v-bind:href="link.url" target="_blank">{{link.name}}</a>
            </li>
        </ul>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    links:[
                        {name:'Spotify', url:'https://www.spotify.com'},
                        {name:'YouTube Music', url:'https://music.youtube.com'},
                        {name:'Apple Music', url:'https://music.apple.com'}
                    ]
                };
            }
        }).mount('.list');
    </script>
</body>
</html>

其中 v-for = "link in links" 表示遍歷links中的所有物件，v-bind : key= "link.name" 表示將 link.name 設定為每個列表項目的唯一識別碼（key），可以幫助 Vue 追蹤元素變化，v-bind : href = "link.url" 表示動態綁定 href 屬性，並且將其值設定為 link.url。

畫面呈現結果：