动态class的几种写法

1.

<button @click="setState(0)" :class="{active:state===0}">按钮</button>

button {
  display: block;
  width: 165px;
  height: 46px;
  font-size: $font-big;
  /*background: linear-gradient(#1f3052, #1e283b);*/
  background: #4A8074;
  box-sizing: border-box;
  border: 2px solid transparent;
  cursor: pointer;
  color: $font-color-normal;
  font-weight: bold;
  margin-bottom: 10px;
  outline: none;

  &.active {
    background: linear-gradient(#3a97a8, #0b5d74);
    border: 2px solid #2e4e5d;
  }
}

2.

<div class="control" :class="{play: !play, pause: play}" @click="clickControl"></div>

play:true

.control {
  width: 64px;
  height: 64px;
  cursor: pointer;

  &.play {
    background-image: url("../../../static/images/mutiplyHistory/play.png");
  }
  &.pause {
    background-image: url("../../../static/images/mutiplyHistory/pause.png");
  }
}

3.

<div :class="['picDiv',item.selected?'divSelected':'']" @click="setStyleToPic">

.picDiv{
  width: 64px;
  height:64px;
  float: left;
  img{
    width: 64px;
    height: 64px;
  }
  &.divSelected{
    width: 72px;
    height:72px;
    img{
      width: 72px;
      height: 72px;
    }
  }
}

4.

<div :class="[rightBtnIsSelected?'yes':'no','nextImg']"></div>

.nextImg{
  cursor: pointer;
  position: absolute;
  bottom: $turn-logo-bottom;
  right: $turn-logo-right;
  pointer-events: auto;
  &.yes{
    
  }
  &.no{
   
  }

}