Class与Style绑定是Vue.js中一个非常强大且常用的特性，它允许我们动态地操作元素的CSS类和内联样式。通过数据驱动的方式控制样式，可以使UI更加动态和交互式。
在Vue中，我们可以使用v-bind指令（简写:）来绑定class和style属性，支持对象语法、数组语法等多种灵活的绑定方式。
在传统的Web开发中，我们通常通过JavaScript直接操作DOM元素的className或style属性来改变样式。这种方式存在几个问题：
需要手动拼接字符串，处理复杂的条件逻辑，代码难以维护。
// 传统方式
if (isActive) {
element.className += ' active';
}
if (hasError) {
element.style.color = 'red';
}
样式逻辑与业务逻辑混杂在一起，违反了关注点分离原则。
// 样式逻辑和业务逻辑混杂
if (user.status === 'inactive') {
element.style.opacity = '0.5';
element.style.cursor = 'not-allowed';
}
复杂的条件样式难以理解和调试，容易出错。
// 复杂条件样式
element.className =
(isActive ? 'active' : '') +
(hasError ? ' error' : '') +
(isLarge ? ' large' : '');
频繁操作DOM样式可能导致性能问题，特别是对于复杂的动画。
// 频繁操作DOM
for (let i = 0; i < 100; i++) {
element.style.transform = `translateX(${i}px)`;
}
Vue的Class与Style绑定提供了声明式的解决方案：
Vue提供了多种方式来绑定class属性，包括对象语法、数组语法、以及结合普通class属性的使用。
对象语法是最常用的Class绑定方式，通过一个对象来动态切换class。
<!-- 根据isActive的真假值切换active类 -->
<div :class="{ active: isActive }"></div>
<!-- 可以绑定多个class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 与普通class属性共存 -->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 绑定计算属性 -->
<div :class="classObject"></div>
当前应用Class: {{ getAppliedClasses() }}
数组语法允许我们绑定一个class列表，数组中的元素可以是字符串、对象或计算属性。
<!-- 传递数组 -->
<div :class="[activeClass, errorClass]"></div>
<!-- 数组中使用对象语法 -->
<div :class="[{ active: isActive }, errorClass]"></div>
<!-- 三元表达式 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<!-- 数组与普通class共存 -->
<div class="static" :class="[activeClass, { 'text-danger': hasError }]"></div>
当前Class数组: {{ selectedClasses }}
当在自定义组件上使用class属性时，这些class将被添加到该组件的根元素上，并且不会覆盖已有的class。
// 子组件
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
});
// 使用组件时添加class
<my-component class="baz boo"></my-component>
// 渲染结果
<p class="foo bar baz boo">Hi</p>
// 绑定动态class
<my-component :class="{ active: isActive }"></my-component>
// 绑定数组
<my-component :class="[activeClass, errorClass]"></my-component>
style绑定用于动态设置元素的内联样式，同样支持对象语法和数组语法。
对象语法是style绑定最常用的方式，CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case)。
<!-- 驼峰式 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 短横线分隔（需要用引号括起来） -->
<div :style="{ 'background-color': bgColor, 'font-size': fontSize + 'px' }"></div>
<!-- 直接绑定样式对象 -->
<div :style="styleObject"></div>
<!-- 自动添加浏览器前缀 -->
<div :style="{ transform: 'scale(' + scale + ')' }"></div>
当前样式对象:
{{ styleOptions }}数组语法可以将多个样式对象应用到同一个元素上，这对于合并多个样式对象非常有用。
<!-- 应用多个样式对象 -->
<div :style="[baseStyles, overridingStyles]"></div>
<!-- 可以混合使用 -->
<div :style="[{ color: textColor }, dynamicStyles]"></div>
当前样式数组:
{{ getStyleArray() }}从Vue 2.3.0开始，可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。
<!-- 提供多个值，Vue会自动检测支持的值 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
<!-- 渲染为支持的值 -->
<div style="display: flex;"></div>
当style绑定需要浏览器引擎前缀时（如transform），Vue会自动检测并添加相应的前缀。你只需要使用标准的CSS属性名即可。
| 特性 | Class绑定 | Style绑定 |
|---|---|---|
| 主要用途 | 动态切换CSS类，适合复杂的样式组合 | 动态设置内联样式，适合简单的样式调整 |
| 语法支持 | 对象语法、数组语法 | 对象语法、数组语法、多重值 |
| 性能 | 通常更好（CSS在样式表中） | 可能较低（内联样式） |
| 浏览器支持 | 所有浏览器 | 所有浏览器，自动添加前缀 |
| 适用场景 |
|
|
| 维护性 | 更好（样式在CSS文件中） | 较差（样式在HTML/JS中） |
| 示例 |
|
|
下面的演示展示了Class与Style绑定的多种实际应用场景，包括主题切换、动态组件、进度条等。
这是一个 {{ componentVariant }} 卡片示例。
当前主题: {{ theme }}
主题类名: {{ themeClasses }}
主题样式: {{ themeStyles }}
组件变体: {{ componentVariant }}
组件类名: {{ componentClasses }}
进度条类名: {{ progressBarClass }}
computed: {
// 主题相关的class
themeClasses() {
return {
'theme-light': this.theme === 'light',
'theme-dark': this.theme === 'dark',
'theme-custom': this.theme === 'custom',
'rounded': true,
'shadow': true
};
},
// 主题相关的style
themeStyles() {
if (this.theme === 'custom') {
return {
backgroundColor: this.customThemeColors.primary,
color: this.customThemeColors.secondary,
border: `2px solid ${this.customThemeColors.secondary}`
};
}
return {};
},
// 组件相关的class
componentClasses() {
const classes = {};
classes[`alert-${this.componentVariant}`] = this.componentType === 'alert';
classes[`bg-${this.componentVariant}`] = this.componentType === 'card';
classes[`btn-${this.componentVariant}`] = this.componentType === 'button';
classes[`badge-${this.componentVariant}`] = this.componentType === 'badge';
classes['text-white'] = ['primary', 'success', 'danger', 'info'].includes(this.componentVariant);
return classes;
},
// 组件相关的style
componentStyles() {
if (this.componentType === 'card' && this.componentVariant === 'warning') {
return { border: '2px dashed #ffc107' };
}
return {};
},
// 进度条class
progressBarClass() {
return {
[`bg-${this.progressColor}`]: true,
'progress-bar-striped': this.stripedProgress,
'progress-bar-animated': this.animatedProgress
};
},
// 进度条style
progressBarStyle() {
return {
width: `${this.progress}%`
};
},
// 动态样式对象
dynamicStyleObject() {
return {
width: `${this.dynamicStyle.width}px`,
height: `${this.dynamicStyle.height}px`,
transform: `rotate(${this.dynamicStyle.rotate}deg)`,
opacity: this.dynamicStyle.opacity,
backgroundColor: '#42b883',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '20px auto',
transition: 'all 0.3s ease'
};
}
}
现在你已经掌握了Class与Style绑定，接下来我们将学习Vue的条件渲染，包括v-if、v-else、v-else-if和v-show指令，用于根据条件显示或隐藏元素。