vue v-for循环数据点击父元素，里面得子元素样式改变

vue v-for循环数据点击父div，里面得子元素样式改变：

html：

<div class="timeRoomFloorCont" v-for="(item,index) in dormitory" :key="index" @click="clickDormitory(item,index)" :class="{timeRoomFloorCont1:classi===index}">
    <div class="timeRoomFloorContTop">
        <img src="../../assets/dormitory/dormitory.png" alt="">
    </div>
    <div class="timeRoomFloorContBottom" >
        <span>{{item.name}}</span>
    </div>
</div>

js：

data() {
  return {
       // 点击变色
       classi: 0
   }
},
methods：{
	clickDormitory(data,index){
       this.classi = index;
    },
}

css：
这里最好使用scss，可以包括这子元素样式，使用继承css；

.timeRoomFloorCont{
        display: inline-block;
        margin-right: .2rem;

        .timeRoomFloorContTop{
            text-align: center;
            background: #f3f3f3;
            border-radius: .1rem;
            margin-bottom: .1rem;
            img{
                width: 75%;
            }
        }
        .timeRoomFloorContBottom{
            width: .7rem;
            text-align: center;
            padding: .05rem .1rem;
            border-radius: .5rem;
            /*background: #5f82fe;*/
            background: #f3f3f3;
            color: #555;
            font-size: .12rem;
            overflow:hidden; /*超出的部分隐藏起来。*/
            white-space:nowrap;/*不显示的地方用省略号...代替*/
            text-overflow:ellipsis;/* 支持 IE */
        }
    }
    .timeRoomFloorCont1{
        .timeRoomFloorContTop{
            @extend .timeRoomFloorContTop;
            background: #5f82fe;
        }
        .timeRoomFloorContBottom{
            @extend .timeRoomFloorContTop;
            background: #5f82fe;
            color: #fff;
        }
    }

标签：vue,5f82fe,text,元素,timeRoomFloorContTop,background,得子,1rem
来源： https://blog.csdn.net/qq_40250507/article/details/115233622