<div :class="[ isOne?'one':'', 'two']">数组方法 </div>
2.对象方法,元素键名为css名称,用true和false 来控制是否显示
<div :class="{'one':isOne,'two':true}">对象方法</div>
3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称
<div :class="isOne?'one':'two'" >直接加入</div>
1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制
<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>
2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值
<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>
3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以
<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>
Vue3对CSS支持加入了更多的特性支持,这样的话,我们在项目当中使用CSS就变得更加灵活了,来吧我们直接上干货
在style的标签上加一个module的属性,这样style里面的内容就会被编译成CSS Modules(模块),默认情况下,我们可以在模板代码里,或者JS里通过$style拿到所有样式属性并使用
我们也可以给CSS Modules自定义一个名称,在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性
与组合式 API 一同使用,注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}
可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上
这个语法同样也适用于
<el-table-column>并不是一个dom节点,所以infotext这个类究竟用在哪,需要看下el-table-column这个组件的实现才知道。用了第三方组件的必然都会遇到你这样的问题,我说下我的解决方法,不一定是好的。
一个vue文件可以写多个<style></style>,加上socped代表本组件的样式,不污染全局。如果需要覆盖第三方组件样式,则不能加scoped,因此需要另写一个<style>.xxx-component{...}</style>,这里用一个大类包裹防止污染全局。
接着,我用比较笨的方法(有好的方法请告知),就是打开f12检查究竟要覆盖哪些样式,然后写在没有加scoped的style里即可。
其实一些好的第三方UI库都有提供自定义样式的方法的,这样实现起来才是最便捷的。