css动态修改样式

总之，同等级别下，后来的样式会覆盖之前的样式

当只需要动态修改部分样式属性值时，没有必要重写全部样式属性值，采用覆盖的方式就好

1.计算属性：

<div class="VmImagePanel" :style="setStyle" />

computed: {
  // 当isHide=true时，left="-250px"的会覆盖left="5px"
  setStyle() {
    return {
      left: this.isHide ? '-250px' : ''
    }
  }
}

<style>
.VmImagePanel {
  position: absolute;
  left: 5px;
}
</style>

2.样式类选择：

<div class="left-btn" :class="isHide && 'left-btn-Hide'" />

<style>
.left-btn {
  &::before {
    position: absolute;
    left: -25px;
    border: 8px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}
// 该样式类生效时，会覆盖left-btn里面相同的样式属性值
.left-btn-Hide {
  &::before {
    left: -15px;
    border-left-color: #fff;
    border-right-color: transparent;
  }
}
</style>