vue style 的scoped 使用

1 原理

vue 可以通过在 style标签添加scoped这个属性来控制 组件内的css作用域

<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

也就是说组件内的html标签 会添加属性,css渲染是也会添加该属性;

2 注意

当组件使用了外部的组件库时,引用的组件的内部标签不会别添加类似于 data-v-21e5b78 的属性,如下图所示,

但是若想复写组件内部标签的样式时,设置的css样式会自动添加该属性,导致该复写的css样式不会生效...

vue style 的scoped 使用

上一篇:解析Asp.net Core中使用Session的方法


下一篇:ASP.NET MVC3中Controller与View之间的数据传递总结