vue中常用样式写法

vue中Class 与 Style 绑定的用法

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