Javascript Vue.js：条件类样式绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43210508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js: Conditional class style binding
提问by Jeremy Thomas
I have some data that is accessible via:
我有一些可通过以下方式访问的数据：
{{ content['term_goes_here'] }}
... and this evaluated to either trueor false. I'd like to add a class depending on the truthiness of the expression like so:
... 这评估为true或false。我想根据表达式的真实性添加一个类，如下所示：
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
where truegives me the class fa-checkbox-markedand false would give me fa-checkbox-blank-outline. The way I wrote it above gives me an error:
wheretrue给我上课，fa-checkbox-marked而 false 会给我fa-checkbox-blank-outline。我上面写的方式给了我一个错误：
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
How should I write it to be able to conditionally determine the class?
我应该如何编写它才能有条件地确定类？
回答by Bert
Use the object syntax.
使用对象语法。
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
When the object gets more complicated, extract it into a method.
当对象变得更复杂时，将其提取到方法中。
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Finally, you could make this work for any content property like this.
最后，您可以为任何这样的内容属性执行此操作。
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
回答by Happyriwan
<i class="fa" v-bind:class="cravings"></i>
and add in computed :
并添加计算：
computed: {
cravings: function()?{
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
回答by kaleazy
回答by Julio Cesar Montenegro
the problem is blade, try this
问题是刀片，试试这个
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
回答by Sunali Bandara
if you want to apply separate css classes for same element with conditions in Vue.jsyou can use the below given method.it worked in my scenario.
如果你想在Vue.js 中为具有条件的相同元素应用单独的 css 类， 你可以使用下面给定的方法。它在我的场景中工作。
html
html
<div class="Main" v-bind:class="{ Sub: page}" >
in here, Mainand Subare two different class names for same div element. v-bind:classdirective is used to bind the sub class in here. pageis the property we use to update the classes when it's value changed.
在这里，Main和Sub是同一个 div 元素的两个不同的类名。 v-bind:class指令用于在这里绑定子类。 page是我们用来在值改变时更新类的属性。
js
js
data:{
page : true;
}
here we can apply a condition if we needed. so, if the page property becomes true element will go with Mainand Subclaases css styles. but if false only Mainclass css styles will be applied.
如果需要，我们可以在这里应用条件。因此，如果页面属性变为 true，元素将使用Main和Sub claases css 样式。但如果为 false，则仅应用Main类 css 样式。
