如何在 vue.js 中删除类

Posted 2023-02-22

【中文标题】如何在 vue.js 中删除类

【英文标题】：How to remove class in vue.js

【发布时间】：2019-04-23 00:07:46

【问题描述】：

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

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

【问题讨论】：

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

【参考方案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;

希望对您有所帮助。