VueJS在点击时添加删除类答案

【问题标题】：VueJS add remove class on clickVueJS在点击时添加删除类
【发布时间】：2017-10-27 01:17:48
【问题描述】：

我有一个带有颜色的“菜单”，当用户单击其中一个 div 时，它应该添加一个活动类，并从其他 div 中删除所有其他活动类...我如何在 VUE 中执行此操作？

<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() 函数中的 i 可以执行以下操作：

event.target.parentNode.classList.remove("active");
            event.target.className = "active";

但是，只是认为在 VUE 中有比直接操作 DOM 更好的方法 this this 吗？

【问题讨论】：

你可以使用 :class vue 指令。也许您需要重构代码。通过 v-for 从数组显示 div：[{class: 'light|dark', active: true|false: background: number}]

标签： vue.js vuejs2

【解决方案1】：

您可以尝试这样的方法，并为对象换出颜色字符串，以便在其中获得明暗类

new Vue({
  el: '#chooser',
  data: () => ({
    // generate the array as you want
    colors: [
      'green', '#000', '#123'
    ],
    activeColor: ''
  })
 })

.colors > div {
  width: 100px;
  height: 100px;
}

.active {
  border: 2px solid red;
}

<div id="chooser">
  <div class="choose-color__primary colors" style="width:400px">
      <div 
        v-for="color in colors" 
        @click="activeColor = color" 
        :style="{'background-color': color}"
        :class="{active: color === activeColor}"
       ></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

【讨论】：