在
<style>中使用一个
module属性, 可以形成名为
$style的计算属性从而在节点中动态绑定样式.
<span :class="$style.text">
...
</span>形成的计算属性可以绑定:class的object/array语法.
在html中 class绑定的事一个object语法.
如果在data上面的
isRed这个属性是
true的话, 就会添加上
red这个属性名从而形成了一个属性控制
<span :class="{[$style.red] : isRed}">
测试
</span>
<script>
data() {
return {
entries: [],
isRed: true,
};
},
</script>
<style module>
.red {
color: red;
}
</style>可以在js中通过
console.log(this.$style.red)进行访问可以使用
module=''来更改
$style这个名称
<div :class="aaa.root">
</div>
<style lang="less" module="aaa">
</style>
scoped的作用域是如何的当
<style></style>标签有
scoped属性的时候, 他的css样式只作用在当前作用域使用了
scoped之后, 父组件的样式不会再深入到自组件. 不过子组件的根节点同时受到 父组件有作用域的CSS 和 子组件有作用域的影响
但是有一点: 如果我们在子组件上面添加了一个类样式 就能向下一层层的进行修改
深度作用选择器:
>>> 或者是
/deep/ 已验证: 在less下面不起作用
已验证: 在普通的css下才起作用.
据网上说,
stylus起作用,
scss不起作用, 并未验证
v-html动态生成的样式不受作用域内样式影响, 但我想应该加个类样式名称,可以解决.(未验证)css的作用域的渲染方式, 远不如class的渲染速度
递归组件中, 小心使用CSS样式.
element中样式的混入方式 (todo)
通过打包进行样式的使用, 故使用方式在
build
