css Module (<style module>,$style.red的写法代表什么?)
一、css Module 简单写法<style module>*这个 module特性指引 Vue Loader 作为名为$style 的计算属性,向组件注入 CSS Modules 局部对象。可在模板中通过一个动态类绑定来使用它,因为$style 是一个计算属性,所以它也支持绑定class的:class 对象/数组语法:<template><div><p
·
一、css Module 简单写法
<style module>
这个module
特性指引 Vue Loader 作为名为$style
的计算属性,向组件注入 CSS Modules 局部对象。- 可在模板中通过一个动态类绑定来使用它,因为
$style
是一个计算属性,所以它也支持绑定class的:class
对象/数组语法:
<template>
<div>
<p :class="$style.red">我是一段文字</p>
<p>我也是一段文字</p>
</div>
</template>
<style module>
.red {
color: red;
}
</style>
二、在一个vue文件中,可定义多个style标签 ,可自定义的注入名称 (注入的名称作为计算属性)
<style module="cssModuleA">
注入标识符cssModuleA ,注意,此时的计算属性名称则为cssModuleA- 值得注意的是:如下文件中,cssModuleA和cssModuleB 中有一个相同的类名,虽然
<p :class="cssModuleB.blue">
明确的指定了是cssModuleB 模块的blue类,但这里并不会起作用,cssModuleA中的blue样式同样在该p标签上生效了。
<template>
<div>
<p :class="cssModuleA.red">我是一段文字</p>
<p :class="cssModuleB.blue">我也是一段文字</p>
</div>
</template>
<style module="cssModuleA">
/* CSS Modules: */
.red {
color: red;
}
.blue {
color: blue;
border: 1px solid green; /* 该样式也会被用上 */
}
</style>
<style module="cssModuleB">
.blue {
color: rgb(14, 187, 245); /* 覆盖了上面的blue样式 */
font-weight: 600;
font-size: 20px;
}
</style>
参考了:博客
更多推荐
已为社区贡献27条内容
所有评论(0)