vue的style样式,vue中style用法
文件是将一个页面分割成多个、多层次的组件。通过多级引用，大大降低了vue文件的长度和页面复杂度。下面这篇文章主要介绍vue3单文件组件的样式特性的相关信息。有需要的朋友可以参考一下。
目录
样式范围样式模块状态驱动的动态css摘要
style scoped
应注意以下几点：
样式不会影响其他组件，但只会在当前组件中生效。
子组件的根元素将受到父组件和子组件的范围样式的影响。这样做的目的是使父组件能够调整子组件的布局。
有3个特殊的选择器：
1.深度选择器：它可以影响子组件。使用pseudo-class=:deep(cls:影响选择器)。答：深(。b) {
.
}
2.槽选择器：可以影响槽内容的样式。使用pseudo class=:slotted(选择器)
:slloted(。a) {
.
}
3.全局选择器：是影响全局局势的风格。使用pseudo class=:global(选择器)
:slloted(。a) {
.
}
作用域样式可以与样式同时存在。
style module
样式标签中带有模块。像样式作用域一样，它的样式只能应用于当前组件。
这个方法将把css编译成css模块。并将其公开给component $styles对象以使用css样式。
模板
p :class=$style.red
这应该是红色的
/p
/模板
样式模块。红色{
颜色：红色；
}
/风格
您可以为模块赋值，以自定义公开的对象名称。
模板
红色的
这应该是红色的
/p
/模板
样式模块=style 。红色{
颜色：红色；
}
/风格
您可以使用usecsmodule () api在复合api中使用cssModule。
//默认情况下，返回样式模块中的类。
使用CssModule()
//name，并返回style module=classes 中的类
useCssModule(classes )
状态驱动的动态css
您可以使用v-bind()将css值与动态组件状态相关联。
模板
你好/div
/模板
脚本
导出默认值{
data() {
返回{
颜色：红色
}
}
}
/脚本
风格。文本{
颜色：v-bind(彩色)；
}
/风格
总结
关于vue3单文件组件的样式特性的这篇文章就到这里了。有关vue3单文件组件的样式特性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。