---
tags: Vue 實戰班
---

# v-bind

官方文件：https://cn.vuejs.org/api/built-in-directives.html#v-bind
縮寫：`:`

說明：動態地綁定 HTML 屬性，將資料傳遞到元素上。

## 動態屬性

- `:` 是 v-bind 的縮寫
- v-bind 可以使用各種 JS 的表達式
- 可以傳入 data 內的資料

<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<img :src="'/path/to/images/' + fileName">

範例重點：

- input 中可以使用 `:value` 動態屬性傳入 data 內的值或是任何 JS 表達式的結果
- `:src` 也同樣道理可傳入 data 內的網址來呈現圖片

<iframe height="300" style="width: 100%;" scrolling="no" title="Vue 動態屬性" src="https://codepen.io/Wcc723/embed/rNEydVR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/rNEydVR">
Vue 動態屬性</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 綁定 Class

綁定樣式，參考文件 [Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html#class-and-style-bindings)
可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

範例重點：

- `:class` 可以使用動態切換 className
- `"{rotate: isTransform}"` 物件中的前者為 className 名稱，後者為判斷式，當為真值時則啟用前者的 className
- 可以透過動態切換 `isTransform` 的 `true` or `false` 來決定是否套用 `rotate`

<iframe height="300" style="width: 100%;" scrolling="no" title="綁定樣式-1" src="https://codepen.io/Wcc723/embed/XWLMEbQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/XWLMEbQ">
綁定樣式-1</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

綁定的物件也不需要撰寫在模板內，在 data 內定義同樣可運作：

範例重點：

- 同樣的邏輯也可直接寫於 data 內，優點是可以同時定義更多的 className 而不造成 HTML 的混亂

<iframe height="300" style="width: 100%;" scrolling="no" title="綁定樣式-2" src="https://codepen.io/Wcc723/embed/ExBWEjB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/ExBWEjB">
綁定樣式-2</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

除此之外還可使用陣列操作，同時為同一個元素賦予多個樣式

範例重點：

- 如果傳入的是陣列，則可以直接啟用該 className
- 透過 checkbox 的切換，則可以操作陣列內的多個值，在 v-model 章節會另有介紹，在此可以專注 input 內的 **value** 即可

<iframe height="300" style="width: 100%;" scrolling="no" title="綁定樣式-3" src="https://codepen.io/Wcc723/embed/abgJYOe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/abgJYOe">
綁定樣式-3</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 行內樣式

Style 也同樣可以使用動態屬性的方式傳入，但要特別注意 class 的名稱要使用小駝峰

範例重點：

- 可以透過 :style 的方式傳入樣式
- 傳入時，樣式的屬性名稱需要使用小駝峰的方式撰寫
- `{ backgroundColor: 'red' }` 前者為 CSS 的屬性，後者為該屬性的值

<iframe height="300" style="width: 100%;" scrolling="no" title="綁定樣式-4" src="https://codepen.io/Wcc723/embed/JjQWLYj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/JjQWLYj">
綁定樣式-4</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 觀念動態屬性 VS 靜態屬性

此範例為觀念題，不需要操作：

- 動態屬性 VS 靜態屬性（ex:`:src` vs `src`）
- 靜態屬性
- 無法進行運算
- 型別一律是字串
- 動態屬性
- 可以傳入任何表達式結果，如：
- true, false vs 'true'
- 1 vs '1'
- 可以傳入 Vue 的 data

<iframe height="300" style="width: 100%;" scrolling="no" title="Vue 動態屬性 VS 靜態屬性" src="https://codepen.io/Wcc723/embed/qBzroOE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/qBzroOE">
Vue 動態屬性 VS 靜態屬性</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>