vue 中动态渲染div样式和选中功能

html部分

    <div class="ss-box">
        <div class="ss-box">
          <div
            :class="chargeSocketIndex === item.id ? 'ssb-item-active' : 'ssb-item'"
            :style="{
              backgroundColor: getBackgroundColor(item.value),
              color: getFontColor(item.value)
            }"
            v-for="(item, index) in data"
            :key="index"
            @click="changeSocket(item)">
            <div class="ssbi-number">{{ item.id }}</div>
            <div class="ssbi-text" v-if="item.value === 0">空闲</div>
            <div class="ssbi-text" v-if="item.value === 1">占用</div>
          </div>
        </div>
      </div>

js部分

let data=[{id:1,value:0},{id:2,value:1},{id:3,value:1},{id:4,value:0},...,{{id:10,value:0}}]
let chargeSocketIndex=-1

  /**
   * 充电插座根据不同的status来渲染背景颜色
   */
  getBackgroundColor(value) {
      switch (value) {
        case 0:
          return '#DDE3EA'
        case 1:
          return '#feedd8'
        default:
          return '' // 默认背景
      }
  },
  /**
   * 充电插座根据不同的status来渲染文字颜色
   */
  getFontColor(value) {
      switch (value) {
        case 0:
          return '#003F7F'
        case 1:
          return '#FBA63E'
        default:
          return '' // 默认背景
      }
  },
  /**
   * 选中效果
   */ 
  changeSocket(item) {
     this.chargeSocketIndex = item.id
  }

css部分 -- 这里的 !important 很重要，缺失代码不会起到选中后改变背景和文字作用

 .ss-box {
      width: 100%;
      height: 110px;
      // background-color: #da0404;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10px 0;
      box-sizing: border-box;
      .ssb-item {
        width: 17%;
        height: 33px;
        background-color: #dde3ea;
        color: #003f7f;
        border-radius: 6px;
        padding: 2px 0;
        box-sizing: border-box;
        .ssbi-number {
          display: flex;
          justify-content: center;
          font-size: 12px;
        }
        .ssbi-text {
          display: flex;
          justify-content: center;
          font-size: 12px;
        }
      }
      .ssb-item-active {
        width: 17%;
        height: 33px;
        background-color: #003f7f !important;
        color: #fff !important;
        border-radius: 6px;
        padding: 2px 0;
        box-sizing: border-box;
        .ssbi-number {
          display: flex;
          justify-content: center;
          font-size: 12px;
        }
        .ssbi-text {
          display: flex;
          justify-content: center;
          font-size: 12px;
        }
      }
    }