【Vue3】CSS 新特性

:slotted

<template>
<!--  App.vue-->
  <Son >
    <div class="a">
      我要插入了
    </div>
  </Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<style>

</style>

<template>
<!--  Son.vue-->
  插槽：
  <slot></slot>
</template>

<script setup lang="ts">

</script>
<style scoped>
:slotted(.a) {
  color: cadetblue;
}
</style>

在这里插入图片描述

:global

<template>
<!--  App.vue-->
  <Son >
    <div class="a">
      我要插入了
    </div>
  </Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
</script>

<style scoped>
:global(div) {
  color: aqua;
}
</style>

v-bind

<template>
<!--  App.vue-->
  <div class="c1">动态css1</div>
  <div class="c2">动态css2</div>
</template>

<script setup lang="ts">
import {ref} from "vue";
const style1 = ref('lightblue')
const style2 = ref({
  color: 'lightgreen'
})
</script>

<style scoped>
.c1 {
  color: v-bind('style1')
}
.c2 {
  color: v-bind('style2.color')
}
</style>

在这里插入图片描述

module

<template>
  <!--  App.vue-->
  <div :class="heo.c1">动态css1</div>
  <div :class="[heo.c2, heo.c1]">动态css2</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

</script>

<style module="heo">
.c1 {
  color: lightblue
}

.c2 {
  border: 1px solid black;
}
</style>

在这里插入图片描述
如果 module 没有指定名字<style module>，则默认使用:class="$style.c1"。