屬性繫結

5 分鐘

您已探索如何使用 handlebars ({{}}) 在網頁上顯示資料。但網頁上的文字並不是唯一可能需為動態的部分。

您可以使用屬性來設定網頁上的許多值。幸運的是，Vue.js 可讓您透過指示詞繫結至屬性。

指示詞

指示詞是 Vue.js 可辨識的屬性。其可讓您以動態方式設定 HTML 屬性的值。所有指示詞的開頭都是 v-。

v-bind

核心指示詞為 v-bind。其可讓您將資料值繫結至屬性。您可以用來動態設定類別的名稱、影像的來源或樣式。

若要使用指示詞，請將 v-bind 和冒號 (:) 放置在您要設定的屬性前面。因此，若要設定影像的 src 屬性，您可以使用 v-bind:src="value"。然後，屬性值的評估方式會類似於您使用 {{ }} 語法時的評估方式。

下列程式碼會產生 HTML 元素 <img src="./media/sample.jpg">。

<div id="app">
    <img v-bind:src="imageSource" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSource: './media/sample.jpg'
            }
        }
    }).mount('#app');
</script>

imageSource 屬性可供範本使用，因為其是從 data() 方法傳回。然後，其會繫結至影像元素的 src 屬性。

注意

您不需要維護應用程式所使用物件的參考。但是您可以立即呼叫 createApp，然後再呼叫 mount，如先前所見。

繫結速記

您現在已瞭解如何在 Vue 應用程式中使用 v-bind 指示詞，將資料繫結至屬性。您也可以在速記中鍵入此指示詞。例如，您可以鍵入 :attribute，而不要輸入 v-bind:attribute。這個速記會為您節省幾個字元。

在繫結影像來源的範例中，您可以透過下列方式使用速記。

<div id="app">
    <img v-bind:src="imageSource" />
</div>

現在您可以鍵入下列程式碼。

<div id="app">
    <img :src="imageSource" />
</div>

提示

使用速記 :attribute 通常會視為比使用 v-bind:attribute 更好的做法。

類別和樣式

您可能需要針對 HTML 元素設定的最常見屬性之一是其 class 或 style。若要繫結至這些屬性，您可以使用 v-bind:class 和 v-bind:style。或者，您可以在速記中使用 :class 和 :style。

類別物件

假設您有一個應用程式具有 centered 和 active 兩個類別。在 HTML 中，以下是您可以使用這些類別的方法。

<div class='centered active'>Hello, Vue!</div>

不過，這個是靜態的範例。如果您想要變更資料的能力，可以使用繫結。 Vue 不僅允許對字串進行繫結，也允許物件的繫結。

以下是您可以將不同屬性的靜態值 centered active 切換移出的方式：

<div id="app">
    <div :class="classObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                classObject: {
                    centered: true,
                    active: true
                }
            }
        }
    }).mount('#app');
</script>

資料屬性 classObject 有兩個屬性，其值為布林值。布林值可讓您啟用或停用特定類別。將 centered 設定為 false 會轉譯 <div class="active">，因為 active 會是唯一仍為 true 的屬性。

注意

JavaScript 命名規則適用於類別物件。因此，如果您的類別名稱使用虛線，例如在 center-text 中，請在新增屬性時，將名稱加上引號 ('center-text': true)。

樣式物件

設定 CSS 中的樣式會牽涉建立索引鍵/值組的集合。使用 JavaScript 物件表示樣式相對自然。在 Vue.js 中，您可以建立樣式物件來設定樣式。

例如，若要設定 HTML 元素樣式的背景色彩 (background-color)，您可以使用下列程式碼。

<div id="app">
    <div :style="styleObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                styleObject: {
                    'background-color': 'red'
                }
            }
        }
    }).mount('#app');
</script>