前言：

        vue3的样式里面新增了一些新特性，这里和vue2的样式做个分析。

vue3: 官方入口

        scoped    module    v-bind(js控制样式)

具体详情：

1、scoped

        当 <style> 标签带有 scoped，它的 CSS 只会应用到当前组件的元素上。

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


<style scoped>
/* 只作用再本组件样式 */
</style>

2、module

  <style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类作为 $style 对象的键暴露给组件：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

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

<template>
  <p :class="classes.red">red</p>
</template>

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

与组合式 API 一同使用

        注入的类可以通过 useCssModule API 在 setup() 和 <script setup> 中使用。对于使用了自定义注入名称的 <style module> 模块，useCssModule 接收一个对应的 module attribute 值作为第一个参数。

// 默认, 返回 <style module> 中的类
useCssModule()

// 命名, 返回 <style module="classes"> 中的类
useCssModule('classes')

3、通过 v-bind 来js动态修改样式，可以来实现主题样式的修改

        单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

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

        这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)

<script setup>
 const theme = {
   color: 'red'
 }
</script>


<template>
  <p>hello</p>
</template>

<style scoped>
 p {
   color: v-bind('theme.color');
 } 
</style>