在vue中获取动态类的“活动”类名

Question

我有这个代码用于vue中的卡片：

<div  id="card" class="card" :class="{'border-danger': alertaCPU }" style="max-width: 18rem;">

我使用此模板创建了6个元素，并且在值超过限制的情况下，边框变为红色。这是函数的代码：

  alertaCPU: function() {
        if (this.valor > this.limite ) {
          this.audio.play();
          console.log("Playingg");

          return true;
        }
        return false;

      }

我尝试获取不同元素的类的名称：

document.getElementById("card").className

并且它一直返回没有动态条件的类的所有名称。

 card border-danger

是否可以获取此时使用的className？

Answer 1

对于此代码:class="{'border-danger': alertaCPU }"，类条件始终返回true; alertaCPU始终是真正的价值，因为它是一个功能。

Vue.js类语法要求类对象具有以下类型：

{ 'class-name': truthyValue }

在这里，您只是传递一个函数名称，它始终是一个真正的值。您必须将此功能转换为getter，如下所示：

computed: {
    alertaCPU: function() {
        if (this.valor > this.limite ) {
        this.audio.play();
        console.log("Playingg");

        return true;
        }
        return false;

    }
}

其次，您的类"card"静态绑定到您的DOM元素，并且无论动态添加的类如何都将始终存在。你在这里可以做的是正则表达式或.classList而不是.className属性，如：

document.getElementById("card").classList;

classList基本上是应用于该元素的所有类的数组。阅读更多关于它here。