Vue 中的样式绑定的常见做法

在 Vue.js 开发中，合理地控制元素的样式对于构建高质量的用户界面至关重要。Vue 提供了灵活的方式来绑定样式，不仅可以应用静态样式，还能基于组件的状态动态改变样式。这篇文章将探索 Vue 中设置样式的七种做法，并结合代码，逐步说明每种方法的实现。

1. 静态样式绑定

最直接的方式，直接在模板中声明样式。

<template>
  <div style="color: blue;">这是一段静态样式的文本。</div>
</template>

2. 数据绑定样式

通过数据绑定动态设置样式。在 data 中定义样式属性，然后在模板中绑定。

<template>
  <div :style="dynamicStyle">这是一段动态样式的文本。</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyle: {
        color: 'red',
        fontSize: '20px'
      }
    }
  }
}
</script>

3. 对象语法

使用对象语法动态切换样式。可以根据组件的状态来决定是否应用某个样式。

<template>
  <div :style="{ color: isActive ? 'green' : 'gray', fontWeight: isActive ? 'bold' : 'normal' }">
    这是一段根据状态变化的文本样式。
  </div>
</template>

4. 数组语法

当需要合并多个样式对象时，可以使用数组语法。

<template>
  <div :style="[baseStyles, overridingStyles]">这是合并了多个样式对象的文本。</div>
</template>

5. 在组件上应用样式

即使是 Vue 组件，也可以像处理普通 HTML 元素一样应用样式。

<template>
  <MyComponent style="display: block;" :style="{ color: textColor }" />
</template>

6. 使用计算属性动态生成样式

当样式逻辑较为复杂时，使用计算属性可以保持模板的简洁。

<template>
  <div :style="complexStyle">这是一段通过计算属性生成的复杂样式文本。</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      fontSize: 16
    };
  },
  computed: {
    complexStyle() {
      return {
        color: this.isActive ? 'purple' : 'pink',
        fontSize: this.fontSize + 'px',
        textDecoration: this.isActive ? 'underline' : 'none'
      };
    }
  }
}
</script>

7. 使用 CSS 变量

利用 CSS 变量（CSS Custom Properties），可以在样式表中定义变量，然后通过 Vue 的样式绑定来动态修改这些变量的值。

<template>
  <div class="text" :style="{ '--text-color': textColor }">这是一段使用 CSS 变量的文本。</div>
</template>

<style>
.text {
  color: var(--text-color);
}
</style>

通过以上介绍的七种方法，本文展示了在 Vue 中设置样式的灵活性和强大功能。实际上，无论是简单的静态样式绑定，还是基于组件状态的动态样式变化，甚至是复杂逻辑下的样式处理，Vue 都能够提供清晰和便捷的解决方案。通过精通这些样式绑定技巧，开发者可以有效提升应用的交互性和用户体验，同时保持代码的可维护性和可扩展性。

附录

下表总结了 Vue 中设置样式的七种实用方法，提供了每种方法的简要说明和适用场景，帮助开发者快速选择合适的方式来应用样式。

原文链接：https://juejin.cn/post/7343493283073572915 作者：慕仲卿