直接拼接字符串 class="block__elem--modifier" 不行，因易漏空格、错分隔符，且 condition 为 false 时生成非法类名如 "user-card__avatar--" 导致样式失效和警告；官方推荐对象语法 :class="{ 'block__elem--modifier': condition }"，语义清晰、安全可靠、支持多状态叠加。
Vue模板里直接拼字符串 class="block__elem--modifier" 为什么不行
因为容易漏空格、错分隔符，比如写成 class="user-card__avatar--large--hover"，实际应是两个独立类：user-card__avatar--large 和 user-card__avatar--hover。更严重的是，一旦 isHover 为 false，整个字符串变成 user-card__avatar--，浏览器会尝试匹配一个非法类名，样式失效且控制台报 warning。
用对象语法 :class="{ 'block__elem--modifier': condition }" 是最简方案
这是 Vue 官方推荐方式，语义清晰、无拼接风险、支持多状态叠加：
- 修饰符必须与基础类共存，不能只写
user-card__avatar--hover而漏掉user-card__avatar - 多个修饰符用多个键值对表达：
:class="{ 'user-card__avatar--large': isLarge, 'user-card__avatar--hover': isHover }" - 基础类名必须显式写出：
class="user-card__avatar" :class="..."，否则修饰符失去上下文 - 布尔值自动转为开关，
undefined或null不会生成类名，安全可靠
复杂场景下推荐封装 useBem 组合式函数
当组件内修饰符多于 3 个、或需在 setup 中复用逻辑时，硬写对象语法开始变臃肿。此时可封装一个轻量函数：
const bem = useBem('user-card__avatar')
// 返回 { 'user-card__avatar': true, 'user-card__avatar--large': isLarge, ... }
- 函数内部统一管理前缀，避免手写重复；
useBem接收 element 名（如avatar），自动补全 block 前缀 - 修饰符命名保持正交，
bem.mod('large')和bem.mod('hover')互不耦合 - 不建议把修饰符逻辑塞进模板，比如
:class="bem.mod('large', 'hover', isDisabled ? 'disabled' : null)"—— 这会让模板承担状态组合职责，难以调试 - TypeScript 类型可约束修饰符取值，防止传入非法字符串如
'user-card__avatar--xxx'
SCSS 中用 &--modifier 嵌套时，JS 必须同步输出对应类名
很多人写了 SCSS：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
.user-card__avatar {
&--large { width: 60px; }
&--hover { transform: scale(1.05); }
}
却在模板里只写 class="user-card__avatar"，结果样式不生效。关键点在于：
- SCSS 编译后生成的是独立选择器，不是“继承”关系；
&--large不会自动作用于没加--large类的元素 - 修饰符类名必须由 JS 显式绑定，哪怕只是静态写死：
class="user-card__avatar user-card__avatar--large" - scoped 样式下，若用
::v-deep穿透第三方组件，也必须确保外层容器带 BEM 块名，否则&--large规则无法命中
真正容易被忽略的是：Modifier 不是“锦上添花”，而是 CSS 规则的入口开关——没加类，再完整的 SCSS 嵌套也等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
