Javascript Vue.js：条件类样式绑定

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

{{ content['term_goes_here'] }}

。。。计算结果为

true

或

false

。我想根据表达式的真实性添加一个类，如下所示：

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

我应该如何编写它才能有条件地确定类？使用

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

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

---

问题是刀片，试试这个

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

---

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

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

---

如果您想在Vue.js 您可以使用下面给定的方法。它在我的场景中起作用

html

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

在这里，如果需要，我们可以应用一个条件。

---

因此，如果页面属性变为true，元素将使用Main和Sub分类css样式。但如果为false，则只应用主类css样式。

您可以使用字符串模板，如带反勾号的“`”：

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

---

我重构为：

@Jeremythonmas我会选择数组语法或对象语法，但不可能两者都选择。是的，我有点惊讶于在他们的文档中看到这种混合语法。不喜欢。当监视的属性来自外部源（如

vue路由器

更改）时，如何触发类绑定进行更新？（例如：

this.$router.push（“/homepage”）

在其他组件中调用）@bigp我希望您可以查看

$route

的更改，并根据需要更改您的类。我必须有太多的方法，因为大约有20个不同的术语用于computed，这比在html标记中包含表达式要干净得多。你也可以做一些类似

的事情，作为

的缩写。

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

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

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

data:{
page : true;
}

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