vue 3 中用 computed 实现动态类名数组拼接，核心是将类名逻辑抽离为响应式计算属性并通过 :class 绑定；支持数组写法、三元判断、逻辑运算、展开合并、filter 过滤及 bem 封装。
在 Vue 3 中，用 computed 实现动态类名数组的优雅拼接，核心是把类名逻辑抽离为响应式计算属性，再通过 :class 绑定到元素上。关键在于：数组写法天然支持拼接，配合三元、逻辑运算或数组展开，可读性高、扩展性强。
基础写法：数组 + 三元判断
最常用也最直观的方式是返回一个数组，把静态类、条件类、动态类统一组织起来：
const isActive = ref(true)
const hasError = ref(false)
const size = ref('large')
<p>const buttonClasses = computed(() => [
'btn', // 静态类
isActive.value ? 'btn-active' : '', // 条件类（空字符串会被忽略）
hasError.value && 'btn-error', // 短路逻辑（false 时为 false，自动过滤）
<code>btn-${size.value}</code> // 动态插值类
])
</p>模板中直接使用：
<button :class="buttonClasses">提交</button>
进阶技巧：用数组展开（...）合并多个来源
当类名来自多个逻辑模块（如组件 props、内部状态、全局配置），可用展开运算符组合：
const props = defineProps({
variant: { type: String, default: 'primary' },
disabled: Boolean
})
<p>const baseClasses = ['btn', <code>btn-${props.variant}</code>]
const stateClasses = computed(() => [
props.disabled && 'btn-disabled',
isHovered.value && 'btn-hover'
])
const themeClasses = ['theme-light'] // 或从 provide 获取</p><p>const fullClasses = computed(() => [
...baseClasses,
...stateClasses.value,
...themeClasses
])
</p>避免空字符串/布尔值污染：用 filter 过滤假值
上面写法中，false、null、undefined、'' 会被自动忽略，但若你显式写了空字符串或 0（比如 index === 0 ? 'first' : ''），建议统一过滤：
const itemClasses = computed(() => [
'list-item',
index.value === 0 && 'first',
index.value === items.length - 1 && 'last',
`level-${depth.value}`
].filter(Boolean)) // 移除所有 falsy 值
搭配 class 名称空间或 BEM：提升可维护性
在中大型项目中，推荐用函数封装 BEM 规则，让类名生成更语义化：
const bem = (block, element, modifier) => {
if (element) return `${block}__${element}`
if (modifier) return `${block}--${modifier}`
return block
}
<p>const cardClasses = computed(() => [
bem('card'),
props.rounded && bem('card', null, 'rounded'),
props.type === 'shadow' && bem('card', null, 'shadow')
].filter(Boolean))
</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
