如何在 vue.js 中删除类

Question

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

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

原文由 Ayaz Sayyed 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。

我相信这是正确的方法:) 请查看 文档 以获取更多详细信息。

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

快乐的黑客:)

原文由 ikos23 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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]

原文由 floormind 发布，翻译遵循 CC BY-SA 4.0 许可协议