VueJS添加去除類點擊

我有一個「菜單」的顏色，當用戶點擊其中一個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？

來源

2017-05-26 hauge

您可以使用：類VUE指令。也許你需要重構代碼。用v-for數組顯示div：[{class：'light | dark'，active：true | false：background：number}] –

你可以嘗試這樣的事情，並換出的顏色字符串對象也得到了光明與黑暗類有

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>

來源

2017-05-26 09:08:55 GOB

VueJS添加去除類點擊

回答

相關問題