我有一些可通过以下方式访问的数据：
{{ 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']"
我应该如何编写它才能有条件地确定类？
使用对象语法。
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]
}
}
}
<i class="fa" v-bind:class="cravings"></i>
并添加计算：
computed: {
cravings: function() {
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
为什么不将对象传递给 v-bind:class 来动态切换类：
<div v-bind:class="{ disabled: order.cancelled_at }"></div>
这是Vue 文档推荐的内容。
问题是刀片，试试这个
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
如果你想在Vue.js 中为具有条件的相同元素应用单独的 css 类， 你可以使用下面给定的方法。它在我的场景中工作。
html
<div class="Main" v-bind:class="{ Sub: page}" >
在这里，Main和Sub是同一个 div 元素的两个不同的类名。 v-bind:class指令用于绑定这里的子类。 page是我们用来在值改变时更新类的属性。
js
data:{
page : true;
}
如果需要，我们可以在这里应用条件。因此，如果页面属性变为 true，元素将使用Main和Sub claases css 样式。但如果为 false，则仅应用Main类 css 样式。