---

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菌做好朋友