style标签中的几个属性

1、vue中使用css通常采用如下形式

<style lang="scss" scoped></style>

2、lang=“scss”

项目引入了sass,sass支持.scss和.sass两种后缀,.sass类似于Python这种,没有大括号,格式要求较高,使用缩进的方式来代替大括号,.scss跟css极其相似,对开发人员更加友好,支持嵌套的写法。

3、scoped

表示该style标签中的样式只作用于父组件。
若没有该属性,则style标签中的样式将会作用到全局。
若想在scoped标签中改变子组件的样式,可使用/deep/、>>>、::v-deep

3.1 原理

在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。
详见文章: https://blog.csdn.net/weixin_39357177/article/details/114371187

猜你喜欢

转载自blog.csdn.net/ABidMan/article/details/129494369