Vue3 样式绑定

写页面时常要根据状态切换样式：选中的按钮高亮、校验出错的输入框变红。传统做法是在 JS 里手动拼接 className，繁琐且易错。Vue3 支持动态绑定 class 和 style，让样式跟随数据自动变化，与状态管理无缝衔接。

绑定 class 的基础写法

用 :class（即 v-bind:class 的缩写）把一个变量的值作为 class 绑到元素上：

<template>
  <p :class="activeClass">你好，Vue3</p>
</template>

<script setup>
const activeClass = 'text-primary'
</script>

渲染结果等价于 <p class="text-primary">。activeClass 的内容变化时，class 会自动同步更新。

对象语法：按条件开/关

:class 接收对象时，键是类名、值是布尔条件：条件为真就加上这个类，为假则不加。这是实现"开关式"样式最常见的写法：

<template>
  <button
    class="btn"
    :class="{ 'btn-active': isActive, 'btn-disabled': isDisabled }"
  >
    提交
  </button>
</template>

<script setup>
const isActive = true
const isDisabled = false
// 效果：元素最终 class 为 "btn btn-active"
</script>

当判断逻辑较复杂时，可以把对象放到计算属性里返回，模板只保留 :class="btnClass" 一句。

数组语法：叠加多个类

需要同时应用多个 class 时用数组，数组元素既可以是变量，也可以是对象或三元表达式：

<template>
  <p :class="[baseClass, isError ? 'text-error' : 'text-normal']">状态提示</p>
</template>

<script setup>
const baseClass = 'msg'
const isError = true
// 效果：元素 class 为 "msg text-error"
</script>

绑定内联 style

:style 可以绑定一个样式对象，属性名既可用驼峰写法 fontSize，也可用引号包裹的 'font-size'：

<template>
  <p :style="{ color: fontColor, fontSize: size + 'px' }">动态样式文字</p>
</template>

<script setup>
const fontColor = '#e74c3c'
const size = 20
// 效果：文字显示为红色、字号 20px
</script>

需要合并多组样式时，:style 也支持数组语法 :style="[baseStyle, extraStyle]"。

小结

样式绑定就是"数据驱动外观"：:class 的对象语法适合按条件开关类名，数组语法适合叠加类名；:style 适合直接控制内联样式。把判断逻辑收敛到计算属性里，模板只留一句 :class，是最优雅的写法。