Vue Lifecycle Hooks beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted errorCaptured renderTracked renderTriggered activated deactivated serverPrefetch
Vue
v-bind 指令在本頁，我們將更詳細地解釋 v-bind 指令。
v-bind 指令
語法
v-bind 指令允許我們將 HTML 屬性繫結到 Vue 例項中的資料。這使得動態更改屬性值變得容易。
<img v-bind:src="url">
CSS 繫結
我們可以使用 v-bind 指令進行內聯樣式設定，並動態修改類。我們將在本節簡要介紹如何操作，並在本教程稍後的 CSS 繫結頁面 進行詳細解釋。
繫結樣式
Vue 中的內聯樣式是透過將 style 屬性與 Vue 進行繫結來實現的，使用 v-bind。
示例
作為 v-bind 指令的值，我們可以編寫一個 JavaScript 物件，其中包含 CSS 屬性和值
字型大小取決於 Vue 資料屬性 'size'。
<div v-bind:style="{ fontSize: size }">
</div>
自己動手試一試 »
文字示例
示例
我們也可以選擇將字型大小的數字值與字型大小的單位分開，如下所示
字型大小的數字值儲存在 Vue 資料屬性 'size' 中。
<div v-bind:style="{ fontSize: size }">
</div>
自己動手試一試 »
<div v-bind:style="{ fontSize: size + 'px' }">
示例
我們也可以使用 CSS 語法（kebab-case）用連字元來寫 CSS 屬性名，但不推薦這樣做
CSS 屬性 fontSize 被稱為 'font-size'。
<div v-bind:style="{ fontSize: size }">
</div>
自己動手試一試 »
示例
<div v-bind:style="{ 'font-size': size + 'px' }">
背景顏色取決於 Vue 例項內的 'bgVal' 資料屬性值。
<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
</div>
自己動手試一試 »
示例
注意這個 div 標籤的背景顏色。
背景顏色是透過一個 **JavaScript 條件（三元）表示式**設定的，取決於 'isImportant' 資料屬性值是 'true' 還是 'false'。
<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
</div>
自己動手試一試 »
條件背景色
繫結類
我們可以使用 v-bind 來更改 class 屬性。
示例
v-bind:class 的值可以是一個變數
class 名稱取自 'className' Vue 資料屬性
<div v-bind:class="className">
</div>
自己動手試一試 »
類由 Vue 設定
示例
v-bind:class 的值也可以是一個物件，其中類名只有在設定為 'true' 時才會生效
class 屬性是否被賦值取決於 'myClass' 是否設定為 'true' 或 'false'
<div v-bind:class="{ myClass: true }">
</div>
自己動手試一試 »
類被條件性地設定以改變背景顏色
示例
當 v-bind:class 的值為物件時，類可以根據 Vue 屬性來賦值
class 屬性根據 'isImportant' 屬性賦值，取決於它是 'true' 還是 'false'
<div v-bind:class="{ myClass: true }">
</div>
自己動手試一試 »
<div v-bind:class="{ myClass: isImportant }">
v-bind 的簡寫
示例
'v-bind:' 的簡寫就是 ':'。
這裡我們只寫 ':' 而不是 'v-bind:'
<div v-bind:class="{ myClass: true }">
</div>
自己動手試一試 »
<div :class="{ impClass: isImportant }">
Vue 練習
Vue
v-bind 指令
