vue通过点击控制多个元素的css样式
<div class="hide-class" v-for="(item,index) in list" :class="{'activeClass': rSelect.indexOf(item)!=-1}" @click="showdifference(item,index)" ><div class="class_triangle" :class="{'classtriangle': rSelect.indexOf(item)!=-1}"></div><img :src="item.big_pic_url" /><p>{{item.name}}</p>
</div>
<script>export default {data() {return {rSelect: [],};},methods: {showdifference(item,index) {if (this.rSelect.indexOf(item) !== -1) {this.rSelect.splice(this.rSelect.indexOf(item), 1); //取消} else {this.rSelect.push(item);//选中添加到数组里}console.log(this.rSelect);},},
}
</script>
<style>
.hide-class{box-sizing: border-box;cursor: pointer;width: 109px;height: 109px;border-radius: 4px;border: 1px solid #E6E6E6;margin-right: 20px;margin-bottom: 20px;position: relative;.class_triangle {position: absolute;bottom: -6px;right: -6px;width: 0px;height: 0px;content: " ";border-right: 6px solid transparent;border-top: 6px solid transparent;border-left: 6px solid transparent;border-bottom: 6px solid transparent;transform: rotate(135deg);}
.classtriangle {border-bottom: 6px solid #FF0E25;
}img{width: 56px;height: 56px;margin: 12px auto 8px;
}
p{text-align: center;
}
}
.activeClass {border: 1px solid #FF0E25;
}
</style>
