vue中样式的实现
Vue 中样式的实现方式
Vue 提供了多种样式实现方式，可以根据项目需求选择合适的方法。
组件内样式（Scoped CSS）
在单文件组件（.vue 文件）的 <style> 标签中添加 scoped 属性，可以使样式仅作用于当前组件。
<template>
<div class="example">Hello</div>
</template>
<style scoped>
.example {
color: red;
}
</style>scoped 会为组件内的元素添加唯一属性（如 data-v-f3f3eg9），并通过属性选择器实现样式隔离。
全局样式
在项目的入口文件（如 main.js）或公共 CSS 文件中定义的样式会全局生效。
/* styles.css */
.global-style {
font-size: 16px;
}在 main.js 中引入：
import './styles.css'CSS Modules
通过配置 vue.config.js 启用 CSS Modules，可以避免类名冲突。
<template>
<div :class="$style.example">Hello</div>
</template>
<style module>
.example {
color: blue;
}
</style>动态样式绑定
使用 v-bind 或 :style 实现动态样式。
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
Dynamic Style
</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 14
}
}
}
</script>预处理器支持
Vue 支持多种 CSS 预处理器（如 Sass、Less、Stylus），需先安装相应 loader。
<style lang="scss">
$primary-color: #333;
.example {
color: $primary-color;
}
</style>深度选择器
使用 ::v-deep 或 /deep/ 穿透 scoped 样式，影响子组件。
<style scoped>
::v-deep .child-component {
color: red;
}
</style>根据项目规模和需求，可以组合使用这些方法实现灵活、可维护的样式方案。
