vue-点击高亮

html

   <div class="arrange_content_bottom">
            <div class="arrange_content_bottom_floor" v-for="(i,v) in fj" :key="v">
              {{i.floorNo}}层
              <div class="arrange_content_bottom_title">
                <div
                  v-for="(k,d) in i.roomList"
                  :key="d"
                  @click="floor(k,d)"
                  :class="{arrange_content_bottom_floordiv:k.liveStatus == '1',arrange_content_bottom_floordiv_no:k.liveStatus == '2',active:active == k.roomNo}"
                >
                  <div class="arrange_content_bottom_floor_num">{{k.roomNo}}</div>
                  <div class="arrange_content_bottom_floor_type" v-if="k.liveStatus == 1">可用</div>
                  <div class="arrange_content_bottom_floor_type" v-if="k.liveStatus == 2">不可用</div>
                  <div class="arrange_content_bottom_floor_yzc">已入住:{{k.livedCount}}</div>
                  <div class="arrange_content_bottom_floor_yzc">{{k.personNames}}</div>
                </div>
              </div>
            </div>
          </div>

js

    // 点击房间
    floor(i, v) {
      console.log("房间", i);
      console.log("序号", v);
      this.hotelRoomId = i.hotelRoomId;
      if (i.liveStatus == "1") {
        this.active = i.roomNo;
      }
    },

css

.active {
  background-color: green !important;
}