vue收藏案例

话不多说上代码

<div :class="{ qwe: true, asd: isshow }" @click="dianji"></div>


data() {
    return {
      isshow: false,
    };
  },
  methods: {
    dianji() {
      this.isshow = !this.isshow;
      if (this.isshow == true) {
        console.log("true");
      } else if (this.isshow == false) {
        console.log("false");
      }
    },
  },

.qwe {
  width: 200px;
  height: 200px;
  background: url("https://img1.baidu.com/it/u=1066462745,1376290088&fm=26&fmt=auto&gp=0.jpg")
    no-repeat;
}
.asd {
  width: 200px;
  height: 200px;
  background: url("https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/42a98226cffc1e17bbf4751c4e90f603738de950.jpg")
    no-repeat;
}