如何在 vue.js 中删除类答案

【问题标题】：How to remove class in vue.js如何在 vue.js 中删除类
【发布时间】：2019-04-23 00:07:46
【问题描述】：

由于我是 Vue.js 的新手，任何人都可以像我们在 JQuery 中那样帮助我如何从元素中删除类。

$('.class1').removeClass("class2");

【问题讨论】：

在此处了解更多关于类绑定的信息vuejs.org/v2/guide/class-and-style.html

标签： jquery vue.js vuejs2

【解决方案1】：

从他们文档中的内容来看，我想说的是你不应该在代码中做的事情。

相反，您的 CSS 类应绑定到属性，并且类的存在应由属性值确定。

示例（来自文档）：

<div v-bind:class="{ active: isActive }"></div>

上述语法意味着active类的存在将由数据属性isActive的真实性决定（如果isActive IS true-类将存在）。

您可以通过在对象中添加更多字段来切换多个类。此外，v-bind:class 指令还可以与普通类属性共存。所以给出以下模板：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

还有以下数据：

data: {
  isActive: true,
  hasError: false
}

它将呈现：

<div class="static active"></div>

当isActive 或hasError 发生变化时，班级列表将相应更新。例如，如果hasError 变为真，则类列表将变为static active text-danger。

我相信这是正确的方法 :) 请查看the documentation 了解更多详情。

如果出于某种原因您需要删除一个类，您可以将 jQuery 作为依赖项添加到您的应用并使用它（但这不是可取的）。

黑客愉快:)

【讨论】：

【解决方案2】：

假设你有一个 this 元素

<div id="randomDiv">
  <p :style="{backgroundColor:color}" @click="updateBackgroundColor(color)">{{obj.name}}</p>
</div>

:style 允许你给元素添加一个样式，在这个例子中是我们添加的backgroundColor 样式，它可以是任何东西，你可以看到它有一个颜色值，它来自下面的 Vue 对象。这最初在 vm = new Vue() 对象中设置为黄色。该对象还有一个名为 updateBackgroundColor 的函数，用于执行更新。颜色从元素中的 @click 传递到此函数。

var obj = {
  "name": "Curtis",
}


var vm = new Vue({
  el: '#randomDiv',
  data: function (){
    return  {
        obj,
        color: 'yellow',
    }
  },
  methods: {
        updateBackgroundColor: function (color) {
        console.log(color);
          if(color === "yellow"){
            this.$set(this.$data, 'color', 'red');
          }
          else{
            this.$set(this.$data, 'color', 'yellow');
          }
        }
    }
});

我也把这个贴在 JsFiddle 里给你看。

[https://jsfiddle.net/ifelabolz/todqxteh/1044/][1]

【讨论】：

【解决方案3】：

我的案例通过添加 CSS 显示/隐藏模式

在元素标签html中

<a href="#" class="copyright" v-on:click="show()">Add Line For Ad</a>

<modal name="qrcode">
 MODAL IS SHOW NOW!!.
</modal>

和

export default {
  methods: {
    show: function() {
      this.$modal.show("qrcode");
    },
    hide() {
      this.$modal.hide("qrcode");
    },
    toggleBodyClass(className) {
      const el = document.body;
      // debugger;
      el.classList.remove(className);
    }
  },
  mounted() {
    this.toggleBodyClass("v--modal");
  }
};

这个 CSS

.v--modal {
  background: red;
}

希望对您有所帮助。

【讨论】：