vue3的style新特性
前言:vue3的样式里面新增了一些新特性,这里和vue2的样式做个分析。vue3: 官方入口scopedmodulev-bind(js控制样式)具体详情:1、scoped当<style>标签带有scoped,它的 CSS 只会应用到当前组件的元素上。<style>/* 全局样式 */</style><style scoped>/* 只作用再本组件样式
·
前言:
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>
更多推荐
已为社区贡献20条内容
所有评论(0)