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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue v-for循环数据点击父元素，里面得子元素样式改变，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1223字，纯文字阅读大概需要2分钟。

内容图文

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 v-for循环数据点击父元素，里面得子元素样式改变全部内容，希望文章能够帮你解决vue v-for循环数据点击父元素，里面得子元素样式改变所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---