Vue.js：条件类样式绑定

Question

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

{{ 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，如果为false，则给我fa-checkbox-blank-outline。按照我上面写的方式会导致错误：

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

我应该如何编写代码以有条件地确定类别？

- Jeremy Thomas

Answer 1

使用对象语法。

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

- Bert

---

我进行了重构，代码如下：<i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>。 - Jeremy Thomas

@JeremyThomas 我会选择数组语法或对象语法中的一个，但可能不会同时使用两者。 - Bert

是的，看到他们文档中混合语法有点让我感到惊讶。我不是很喜欢。 - dave

当监视的属性来自于外部源，比如在另一个组件中调用this.$router.push('/homepage')时，您如何触发类绑定以进行更新？ - chamberlainpi

@bigp 我希望你能够监视 $route 的变化并根据需要更改你的类。https://router.vuejs.org/zh/api/route-object.html - Bert

Answer 2

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

并添加计算：

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

- Happyriri

---

好的，我会尽力进行翻译，请问您需要将这段话翻译成简体中文还是繁体中文呢？ - Jeremy Thomas

支持使用计算属性，这比在HTML标签内包含表达式更加清晰。 - Johncl

Answer 3

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

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

这是Vue文档推荐的做法。

- kaleazy

Answer 4

问题出在刀片上，请尝试这个

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

- Julio Cesar Montenegro

Answer 5

你可以使用带有反引号 `` 的字符串模板，如下所示：

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"

- Boussadjra Brahim

Answer 6

如果您想在具有条件的同一元素上应用不同的CSS类，可以使用以下所示的方法在Vue.js中进行操作。这在我的场景中有效。 html：

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

这里，Main和Sub是用于同一div元素的两个不同的类名。 v-bind:class指令用于绑定此处的子类。 page是我们用来更新类的属性，当它的值改变时。

js

data:{
page : true;
}

在这里，我们可以应用一个条件如果需要的话。所以，如果页面属性变为true那么元素将会带有Main和Sub 类的CSS样式。但是如果是false，则只会应用Main类的CSS样式。

- Sunali Bandara

---

最易懂的答案。 - MattSom

Answer 7

实际上有多种方法可以做到这一点。您可以在v-bind内直接使用条件，就像这样：

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

另一种方式是在模板中使用脚本部分内的条件语句，像这样：

<i v-bind:class="yourClass">

然后在脚本中加入以下内容：

data() { 
    return { 
      yourClass = content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline' 
    }
}

- Al-Amin Islam Hridoy