---

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