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

最新推荐文章于 2023-07-12 14:29:36 发布

她和海水一样咸

最新推荐文章于 2023-07-12 14:29:36 发布

阅读量769

点赞数 2

分类专栏： vue v-for 点击变色

本文链接：https://blog.csdn.net/qq_40250507/article/details/115233622

版权

vue html css

vue 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

v-for

2 篇文章 0 订阅

订阅专栏

点击变色

1 篇文章 0 订阅

订阅专栏

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;
        }
    }