Question

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

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

Answer 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为true，则类别列表将为static active text-danger。

我认为这是正确的方法：）请检查the documentation了解更多详细信息。

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

快乐黑客：）

Answer 2

鉴于您有一个this元素

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

：style 允许您向元素添加样式，在这种情况下，这是我们要添加的 backgroundColor 样式，可以是任何样式，并且您可以看到Vue对象下面有一个color值。最初在 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]

Answer 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;
}

希望获得帮助。

如何在vue.js中删除类

3 个答案: