vue实现动态绑定多个不同的类名

场景：在tab切换过程中每一个激活状态的按钮背景颜色不一样
如图：1.
2.
3.
代码实现：主要注意动态class的写法

<div class="tab_box flex_dom flex_item_around flex_item_mid">
        <span
          v-for="(item,index) in switchMapTab"
          :key="index"
          :class="[{activeTab0:chooseIndexSwitchMap === 0&&chooseIndexSwitchMap === index},{activeTab1:chooseIndexSwitchMap === 1&&chooseIndexSwitchMap === index},{activeTab2:chooseIndexSwitchMap === 2&&chooseIndexSwitchMap === index},{activeTab3:chooseIndexSwitchMap === 3&&chooseIndexSwitchMap === index},{activeTab4:chooseIndexSwitchMap === 4&&chooseIndexSwitchMap === index}]"
          @click="chooseItMap(index)"
        ><span
            class="squareType"
            :class="'square'+index"
          ></span>{{item}}</span>
      </div>

样式：

.tab_box {
      width: 1200px;
      height: 180px;
      margin: 0 auto;
      > span {
        display: inline-block;
        min-width: 140px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #ffffff;
        box-shadow: 0px 4px 8px 0px rgba(236, 91, 44, 0.2);
        border-radius: 35px;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        box-sizing: border-box;
        padding: 0 20px 0 20px;
        cursor: pointer;
        .squareType {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: #b392e9;
          border-radius: 4px;
          border: 1px solid #ffffff;
          margin-right: 10px;
          vertical-align: middle;
        }
        .square0 {
          background: #b392e9;
        }
        .square1 {
          background: #5cbeff;
        }
        .square2 {
          background: #97dd72;
        }
        .square3 {
          background: #ffa55f;
        }
        .square4 {
          background: #ff7d69;
        }
      }
      .activeTab0 {
        background: #b392e9;
        color: #fff;
      }
      .activeTab1 {
        background: #5cbeff;
        color: #fff;
      }
      .activeTab2 {
        background: #97dd72;
        color: #fff;
      }
      .activeTab3 {
        background: #ffa55f;
        color: #fff;
      }
      .activeTab4 {
        background: #ff7d69;
        color: #fff;
      }
    }