Vue中:class和:style实现样式动态切换，核心是数据驱动类名与内联样式自动更新；对象语法控制开关、数组语法灵活组合、计算属性封装复杂逻辑。
Vue 用 :class 和 :style 实现样式动态切换，核心是让类名和内联样式随数据变化自动更新，不用手动操作 DOM。
对象语法控制类名开关
最常用也最直观的方式。键是类名（带短横线的要加引号，比如 'text-danger'；驼峰命名如 activeItem 可不加），值是布尔表达式。为 true 时添加该类，false 时不添加。
- 可与静态 class 共存：
<div class="btn" :class="{ 'btn-primary': isPrimary, disabled: isDisabled }> - 直接绑定一个 data 对象：
:class="classObj"，其中classObj = { active: true, 'has-error': false } - 适合单个或多个明确条件控制类是否启用的场景
数组语法组合多种类名
当需要混合固定类、条件类、甚至嵌套对象时，数组语法更灵活。
- 基础写法：
:class="[ 'base', isLarge ? 'lg' : 'sm', { 'highlight': isUrgent } ] - 元素可以是字符串（静态类）、三元表达式（简单条件）、对象（复杂条件）
- 比纯对象语法更适合“基础样式 + 多种修饰状态”的结构，比如按钮的尺寸、主题、禁用态等同时存在
对象语法设置内联样式
给 :style 绑定一个对象，属性名支持驼峰（fontSize）或短横线（'font-size'），Vue 会自动处理浏览器前缀；值必须是字符串，单位如 'px'、'rem' 要手动拼接。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
:style="styleObj"，把样式对象定义在 data 或 computed 中，保持模板简洁 - 支持多对象合并：
:style="[ baseStyle, dynamicStyle ]"，适用于基础样式 + 动态覆盖 - 注意：数值型属性不能省略单位，
fontSize: 14不生效，得写成fontSize: '14px'
用计算属性封装复杂逻辑
当 class 或 style 的判断变多——比如根据 status、theme、size、loading 等多个字段组合出不同样式——别堆在模板里写一长串三元或函数调用。
- 把生成逻辑移到
computed中，返回一个对象或数组 - 例如：
computed: { btnClass() { return [ this.base, this.isOutlined ? 'outline' : 'filled', { 'is-loading': this.loading } ] } } - 这样模板干净，逻辑集中，便于复用和测试
