2
我有一个“菜单”的颜色,当用户点击其中一个div的,它应该添加一个活动类,并从其他div中删除所有其他活动类...如何做我在VUE中这样做?VueJS添加去除类点击
<div class="choose-color__primary" style="width:400px">
<div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 30)}"></div>
<div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 15)}"></div>
<div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 0)}"></div> <!-- This is the color the user has chosen from color wheel -->
<div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -15)}"></div>
<div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -30)}"></div>
</div>
我知道,我在selectColor()函数可以这样做:
event.target.parentNode.classList.remove("active");
event.target.className = "active";
然而,就觉得有在VUE更好的方式比直接在此这个操纵DOM?
您可以使用:类VUE指令。也许你需要重构代码。用v-for数组显示div:[{class:'light | dark',active:true | false:background:number}] –