---

theme: vue-pro highlight: a11y-dark

---

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第18天，活動詳情檢視：2021最後一次更文挑戰」

在應用介面中, 某個(些)元素的樣式是變化的，class/style 繫結就是專門用來實現動態樣式效果的技術

1. class 繫結

javascript :class='xxx' // xxx可以是字串、物件、陣列。

字串

1) 表示式是字串: 'classA'

適用於：類名不確定，要動態獲取

```js

```

物件

2) 表示式是物件: {classA:isA, classB: isB}

適用於：要繫結多個樣式，個數不確定，名字也不確定

```js

```

陣列

3) 表示式是陣列: ['classA', 'classB']

適用於：要繫結多個樣式，個數確定，名字也確定，但不確定用不用

```js

```

2. style 繫結

javascript :style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中 activeColor/fontSize 是 data 屬性

javascript :style="{fontSize: xxx}"其中xxx是動態值。 :style="[a,b]"其中a、b是樣式物件。

物件

```js

```

陣列

```js

```

最後，歡迎關注我的專欄，和YK菌做好朋友