Vue.js：条件类样式绑定

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

{{ content['term_goes_here'] }}

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

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

where true给我上课fa-checkbox-marked假的会给我fa-checkbox-blank-outline。我上面写的方式给了我一个错误：

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

我应该怎么写才能有条件地确定班级？

Use the 对象语法 https://v2.vuejs.org/v2/guide/class-and-style.html.

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