# Vue學習#35 Vue.js 與 css 樣式綁定
###### tags: `Vue 直播班 - 2022 春季班`

## 控制 class

`v-bind` 除了可以用來控制一般屬性之外，也可以用來控制標籤的 class 與
style 的內容

## 操作方法範例

操作內容: 在一個 input 裡面，10個字以內 border 為紅色，且字體內容也是紅色，大於等於10個字時字體變藍色並且加粗

### step1 新增 input


我們新增一個 input ， 在 vue data 也新增一個變數 mes ，並用 `v-model` 綁定 mes ， .trim 去空白來判斷字數

### step2 新增 class 並撰寫 css


我們為 class 撰寫 css 樣式

### step3 v-bind 綁定 CSS

語法: ` v-bind:class="{ ...樣式 }" `


這裡的撰寫方式就是判斷 v-model 綁定的 mes 字數是否大於等於 10，並在不同情況套用兩個不同的 class ， 要套用多個 class 時，記得用 `,` 來分隔開來

### [操控 class 範例](https://codepen.io/binlandz123/pen/MWQBGZJ)

## 透過 Vue 操控 style


我們直接在 Vue data 建立一個物件並且把 CSS 寫進去


透過 `v-bind` 綁定 style 並套用物件


成功!

### [操控 style 範例](https://codepen.io/binlandz123/pen/LYQBrLa)

## 參考
[[Vue.js][日記]class與style綁定](https://ithelp.ithome.com.tw/articles/10218421)
[008天絕對看不完的 Vue.js]