Vue.js：条件类样式绑定

75

我有一些可通过以下方式访问的数据：

{{ content['term_goes_here'] }}

...并将其评估为true或false。我想根据表达式的真实性添加一个类，如下所示：

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

哪里true给我上课fa-checkbox-marked，错误会给我fa-checkbox-blank-outline。我上面写的方式给我一个错误：

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

我应该如何编写它才能有条件地确定班级？

— 杰里米·托马斯（Jeremy Thomas）
source

1

您也可以做一些<button :class="disabled && 'disabled'">简化的操作<button :class="disabled ? 'disabled' : false">。

— xpuu

114

使用对象语法。

v-bind:class="{'fa-checkbox-marked': content['cravings'],  'fa-checkbox-blank-outline': !content['cravings']}"

当对象变得更复杂时，将其提取到方法中。

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            'fa-checkbox-marked': this.content['cravings'],  
            'fa-checkbox-blank-outline': !this.content['cravings']}
    }
}

最后，您可以对任何此类内容属性进行此操作。

v-bind:class="getClass('cravings')"

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}

— 伯特
source

2

我重构为：<i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>

— Jeremy Thomas

1

@JeremyThomas我会使用数组语法或对象语法，但可能不会两者都使用。

— Bert

是的，我在他们的文档中看到这种混合语法感到有些惊讶。不是粉丝。

— dave

当监视的属性来自外部资源（例如vue-router更改）时，如何触发类绑定更新？（例如：this.$router.push('/homepage')在其他组件中的其他地方调用）

— bigp

@bigp我希望您可以监视$route更改并根据需要更改您的课程。router.vuejs.org/en/api/route-object.html

— Bert

39

<i class="fa" v-bind:class="cravings"></i>

并添加计算：

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}

— Happyriri
source

3

我将不得不使用太多的方法，因为大约有20个不同的术语

— Jeremy Thomas

4

投票支持计算，比在html标记内包含表达式要干净得多。

— Johncl

27

为什么不将对象传递给v-bind：class来动态切换类：

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

这是Vue docs建议的。

— 卡莱兹
source

8

问题是刀片，请尝试此

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

— 朱利奥·塞萨尔·黑山
source

3

如果要在Vue.js中为具有条件的元素应用单独的CSS类，则可以使用以下给定的方法。

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

在这里，Main和Sub是同一div元素的两个不同的类名称。 v-bind：class指令用于在此处绑定子类。页是属性的值更改时用于更新类的属性。

js

data:{
page : true;
}

如果需要，我们可以在此处应用条件。因此，如果page属性变为true，则元素将具有Main和Sub 子句css样式。但如果为false，则只会应用Main class css样式。

— 苏纳利·班达拉（Sunali Bandara）
source