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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值