当前位置：首页 > news >正文

【Vue3】CSS 新特性

news 2025/8/26 21:58:27

: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"。