1.数组的方式
<div :class="[isActive ? activeClass : '', errorClass]"></div>
2.对象的方式
<el-image :class="{filterGray : each.status==0}">
</el-image>
css滤镜, 修改所有图片的颜色为黑白 (100% 灰度):
.filterGray {
::v-deep .el-image__inner {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
3.三元表达式
<section :style="{ background: routeInfo ? '#0d1927' : '#fff' }">
</section>
4.引入变量样式
scss中暴露样式, 在js中引入则需要export, 若在另外的scss中引入变量则不需要
$color:#ff8b14;
:export {
color: $color;
}
import variables from "@/assets/styles/variables.scss";
//使用时
variables.color