Class 与 Style 绑定

[Class 绑定]

对象语法 // 根据 isActive 的真假值切换 ‘active’ 类 <div :class="{ active: isActive }"></div>

// 多字段示例

VUE

const classObject = reactive({
  active: true,
  'text-danger': false
})
<div :class="classObject"></div>

数组语法

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

// 数组 + 对象混合 <div :class="[{ active: isActive }, errorClass]"></div>

组件继承

<p class="base" :class="$attrs.class">Hello</p>

<MyComponent class="custom-class" />

[Style 绑定]

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

VUE

// 推荐样式对象形式
const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})
<div :style="styleObject"></div>

数组语法（合并多个对象） <div :style="[baseStyles, overridingStyles]"></div>
自动前缀

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

多重值

<div :style="{ display: ['-webkit-flex', 'flex'] }"></div>

[最佳实践]

◆ Class 绑定场景对比

场景	推荐方式	示例
单个条件类	对象语法	:class=”{ active: isActive }
多个静态类	数组语法	:class=”[‘a’, ‘b’]
动态类名	计算属性	computedClass
组件透传类	$attrs.class	<component :class=“$attrs…

◆ Style 绑定注意事项

推荐使用 camelCase（驼峰式）写法
数值类型会自动添加 ‘px’ 单位（可禁用）
优先使用 CSS 类控制样式，内联样式用于动态计算值

[常见错误示例]

❌ 错误：直接拼接字符串 <div class="static-class {{ dynamicClass }}"></div>

✅ 正确：使用绑定语法 <div :class="['static-class', dynamicClass]"></div>

❌ 错误：过度嵌套

VUE

:style="{ 
  'font-size': isLarge ? largeSize + 'px' : normalSize + 'px' 
}"

✅ 正确：使用计算属性 const fontSize = computed(() => ${isLarge.value ? 24 : 14}px)

[高级用法]

动态参数

<div :class="{ [dynamicClassName]: true }"></div>

<div :style="{ [dynamicStyleProp]: 'red' }"></div>

深层选择器穿透

VUE

<style scoped>
/* 使用 :deep() 修改子组件样式 */
:deep(.child-class) { color: red; }
</style>```

3. 强制更新技巧
// 通过改变 key 强制重新渲染
```vue
<div :class="classes" :key="styleVersion"></div>
const forceUpdate = () => styleVersion.value++

[性能建议]

避免在模板中编写复杂样式逻辑
对频繁变化的样式使用 CSS 类而非内联样式
超过 10 个动态类应考虑使用 CSS Modules

类样式与绑定

Class 与 Style 绑定

文章目录