东月的文档站

Appearance

Return to top
On this page

在 Vue 中通过数据驱动 CSS 样式，有两种方式：Class 绑定 和 Style 绑定。

Class 绑定

对象语法 — 按条件切换

最常用的方式：class 名写在左边，条件写在右边。

vue
<template>
  <p :class="{ active: isActive, error: hasError }">状态文本</p>
  <button @click="isActive = !isActive">切换 active</button>
</template>
<script>
export default {
  data() {
    return {
      isActive: false,
      hasError: true
    }
  }
}
</script>

当 isActive 为 false、hasError 为 true 时，渲染结果：

html
<p class="error">状态文本</p>

规则：{ class名: 条件 } — 条件为真就加这个 class，为假就不加。

把对象放 data 里

当 class 很多时，把对象放 data 里，模板更干净：

vue
<template>
  <p :class="classObject">文本</p>
</template>
<script>
export default {
  data() {
    return {
      classObject: {
        active: false,
        error: true,
        'text-large': true     // 带横杠的 class 名要加引号
      }
    }
  }
}
</script>

数组语法 — 直接拼 class

vue
<template>
  <p :class="[baseClass, statusClass]">文本</p>
</template>
<script>
export default {
  data() {
    return {
      baseClass: 'text-lg',
      statusClass: 'color-red'
    }
  }
}
</script>

渲染结果：<p class="text-lg color-red">文本</p>

混合使用

数组和对象可以组合：

vue
<p :class="['base', { active: isActive }]">文本</p>

'base' 始终存在，active 根据 isActive 决定。

:class 和普通 class 共存

:class 不会覆盖普通 class，它们会合并：

vue
<button class="btn" :class="{ disabled: isDisabled }">提交</button>
<!-- 渲染: <button class="btn disabled">提交</button> -->

Style 绑定

对象语法

vue
<template>
  <p :style="{ color: textColor, fontSize: size + 'px' }">彩色文字</p>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      size: 18
    }
  }
}
</script>

CSS 属性名有两种写法：

  • 驼峰式（推荐）：fontSize
  • 短横线式（加引号）：'font-size'

完整对象放 data 里

vue
<template>
  <div :style="styleObj">带样式的区域</div>
</template>
<script>
export default {
  data() {
    return {
      styleObj: {
        color: 'red',
        fontSize: '18px',
        fontWeight: 'bold'
      }
    }
  }
}
</script>

数组语法

vue
<p :style="[baseStyle, highlightStyle]">文本</p>
<!-- 后面的样式会覆盖前面的同名属性 -->

Class vs Style，什么时候用哪个？

| 用 Class 绑定 | 用 Style 绑定 | | 样式是预定义好的（在 CSS 里写好） | 样式是动态算出来的（如用户滑条调颜色） | | 切换多个 class | 改个别属性 | | 更利于维护（样式和逻辑分离） | 需要精确控制像素值 |

💡 Tip：优先用 Class 绑定。 大部分场景用 Class 绑定就够了，Style 绑定只在需要动态计算数值时才用。