Class与Style绑定

Class 绑定

在Vue中，你可以使用v-bind:class（或简写为:class）来动态地绑定一个或多个类名到元素上。绑定的值可以是一个字符串、对象或数组。

字符串语法

<div v-bind:class="activeClass"></div>

或者简写为：

<div :class="activeClass"></div>

对象语法

对象语法允许你通过键值对的形式动态地切换类名。 

数组语法

当你需要应用多个类名时，可以使用数组语法。

<div :class="[activeClass, errorClass]"></div>

这里，activeClass和errorClass都是组件data函数返回的字符串，它们都会被添加到元素上。

Style 绑定

Vue也允许你通过v-bind:style（或简写为:style）来动态地绑定样式。它的值可以是一个对象或一个数组（用于应用多个样式对象）。

对象语法

对象语法允许你以CSS属性名作为键、对应的值作为值的形式来绑定样式。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

这里，activeColor和fontSize都是组件data函数返回的值，它们会被应用到元素的样式上。

数组语法

当需要应用多个样式对象时，可以使用数组语法。

<div :style="[baseStyles, overridingStyles]"></div>

这里，baseStyles和overridingStyles都是组件data函数返回的对象，它们包含的样式会被合并后应用到元素上，overridingStyles中的样式会覆盖baseStyles中相同的属性。