vue开关灯效果,点击切换显示不同背景色

<el-button class="selectall" :style="activeall"  type="info" @click="selectall">全选菜单</el-button>
 <span class="gou" :style="activegou" @click="selectall"><i :style="activen" class="el-icon-check"></i></span>



data(){
  return:{
     activeall: "",
      activegou: "",
      activen: "",
      v: true,
}
},
methods:{
     selectall() {
      if (this.v == true) {
        this.activeall = "background-color:rgb(64,158,255);";
        this.activegou = "border:1px solid rgb(64,158,255); border-left:none;border-radius: 4px;";
        this.activen = "color:rgb(64,158,255); ";
        this.v = false;
      } else {
        this.activeall = "";
        this.activegou = "";
        this.activen = "";
        this.v = true;
      }
    },
}



 .selectall {
        background-color: rgb(210, 210, 210);
        border: transparent;
        color: #fff;
        font-size: 16px;
      }
      .gou {
        width: 35px;
        height: 40px;
        margin-right: 10px;
        border: 1px solid rgb(235, 235, 235);
        border-left: none;
        .el-icon-check {
          font-size: 34px;
          color: rgb(194, 194, 200);
        }
      }
    }


版权声明:本文为xx820702原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。