我有一些数据,可以通过以下方式访问:
{{ 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="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>