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>

總結

以上是生活随笔為你收集整理的vue切换css样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。