VueJS点击

Question

我有一个带有颜色的“菜单”，当用户单击其中一个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（）函数中可以执行以下操作：

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

然而，只是认为在VUE中有一种比直接操作DOM更好的方法吗？

Answer 1

你可以试试这样的东西并换出对象的颜色字符串，以便在那里得到明暗类

＆＃13;

＆＃13;

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

＆＃13;

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

.active {
  border: 2px solid red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;