vue 点击后动态绑定、删除class

需求是点击按钮切换部分显示内容，并显示不同的class样式

之前遇到的动态添加class及删除同级class的需求比较多，在这里记录一下此类情况~

点击切换内容，改变删除原有class,新增class

 

切换按钮

<el-button class="title_btn" type="primary" icon="el-icon-set-up" @click="changaView">
   切换显示模式
</el-button>

动态绑定class

<div :class="{'chartClass':active1, 'cardClass':active2}">

 data() {
      return {
        isActive:true,
        active1:true,
        active2:false,
      }
    },

按钮事件

 changaView(){
       this.isActive = !this.isActive
       if(this.isActive){
           this.active1 = true;
           this.active2 = false;
       }else{
           this.active1 = false;
           this.active2 = true;
       }
     }