Vue3 样式绑定详解
面向初学者的样式绑定知识汇总，通俗易懂的解释和示例
绑定HTML Class
在Vue中，我们可以使用:class指令动态绑定HTML元素的class。
1. 对象语法
<div :class=”{ active: isActive, ‘text-danger’: hasError }”></div>
根据isActive和hasError的真假值来添加/移除类
2. 数组语法
<div :class=”[activeClass, errorClass]”></div>
将多个class绑定到一个数组中，在data里定义类名字符串
3. 三目运算符
<div :class=”isActive ? ‘active’ : ‘inactive'”></div>
根据条件动态切换class
演示示例
{{ isActive ? ‘激活状态’ : ‘未激活’ }}
内联样式绑定
使用:style指令可以直接动态修改元素的内联样式
1. 对象语法
<div :style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”></div>
直接传入一个样式对象，CSS属性名可以用驼峰式或短横线分隔
2. 数组语法
<div :style=”[baseStyles, overridingStyles]”></div>
绑定多个样式对象，后者会覆盖前者中相同的属性
3. 自动前缀
<div :style=”{ transform: ‘rotate(‘ + angle + ‘deg)’ }”></div>
Vue会自动为需要浏览器引擎前缀的CSS属性添加前缀
演示示例
动态样式盒子
高级绑定技巧
Vue3提供了一些更高级的样式绑定方式
1. 组件上使用Class
<!– 子组件根元素 –>
<div class=”base” :class=”$attrs.class”></div>
<div class=”base” :class=”$attrs.class”></div>
组件上的class会被添加到组件的根元素上
2. 多重值
<div :style=”{ display: [‘-webkit-box’, ‘-ms-flexbox’, ‘flex’] }”></div>
提供多个值，Vue只会渲染浏览器支持的最后一个值
3. 绑定计算属性
computed: {
boxClasses() {
return {
active: this.isActive,
‘warning’: this.hasWarning
}
}
}
boxClasses() {
return {
active: this.isActive,
‘warning’: this.hasWarning
}
}
}
通过计算属性返回class对象，使模板更简洁
演示示例
计算属性类绑定
核心知识点总结
:class绑定： 用于动态切换类名，支持对象、数组和表达式语法
:style绑定： 用于动态修改内联样式，同样支持对象和数组语法
自动前缀： Vue会自动为需要浏览器引擎前缀的CSS属性添加前缀
组件继承： 组件上的class会添加到组件的根元素上
最佳实践： 当样式逻辑复杂时，使用计算属性返回class对象
注意事项： class和:class可以共存，Vue会合并它们