当前位置：首页 > VUE

vue中样式的实现

2026-01-23 03:23:41VUE

Vue 中样式的实现方式

Vue 提供了多种样式实现方式，可以根据项目需求灵活选择。

组件内样式（Scoped CSS）

在单文件组件（.vue 文件）的 <style> 标签中添加 scoped 属性，使样式仅作用于当前组件：

<style scoped>
.button {
  background-color: #42b983;
}
</style>

Scoped CSS 通过添加唯一属性选择器实现样式隔离，编译后类似：

.button[data-v-f3f3eg9] {
  background-color: #42b983;
}

全局样式

在 main.js 或单独 CSS 文件中引入的样式会全局生效：

import './assets/global.css'

或在组件中使用非 scoped 的 <style>：

vue中样式的实现

<style>
/* 全局样式 */
</style>

CSS Modules

通过 module 属性启用 CSS Modules，生成局部类名：

<style module>
.red {
  color: red;
}
</style>

<template>
  <p :class="$style.red">红色文字</p>
</template>

动态样式绑定

使用 v-bind:class 或 :class 实现动态样式：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

行内样式

通过 :style 绑定行内样式：

vue中样式的实现

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 14
    }
  }
}
</script>

预处理器支持

Vue 支持主流 CSS 预处理器，需先安装相应 loader：

<style lang="scss">
$primary-color: #333;
body {
  color: $primary-color;
}
</style>

<style lang="less">
@primary-color: #333;
body {
  color: @primary-color;
}
</style>

深度选择器

使用 ::v-deep 或 /deep/ 穿透 scoped 样式限制：

::v-deep .child-component {
  color: red;
}

CSS 变量

结合 Vue 响应式数据使用 CSS 变量：

<template>
  <div class="text">变量文本</div>
</template>

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

<script>
export default {
  mounted() {
    document.documentElement.style.setProperty('--text-color', 'blue')
  }
}
</script>