标签：vue 5f82fe text 元素 timeRoomFloorContTop background 得子 1rem

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。