blocks|key|735356|text|使用对象语法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|735357|v-bind:class="{'fa-checkbox-marked':+content['cravings'],++'fa-checkbox-blank-outline':+!content['cravings']}"|code-block|syntax|javascript|735358|当对象变得更复杂时，将其提取到一个方法中。|735359|v-bind:class="getClass()"

methods:{
++++getClass(){
++++++++return+{
++++++++++++'fa-checkbox-marked':+this.content['cravings'],++
++++++++++++'fa-checkbox-blank-outline':+!this.content['cravings']}
++++}
}|735360|最后，您可以对任何类似的内容属性执行此操作。|735361|v-bind:class="getClass('cravings')"

methods:{
++getClass(property){
++++return+{
++++++'fa-checkbox-marked':+this.content[property],
++++++'fa-checkbox-blank-outline':+!this.content[property]
++++}
++}
}|735362|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/guide/class-and-style.html^0|2|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

Use the <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="noreferrer">object syntax</a>.
<pre><code>v-bind:class=&quot;{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}&quot;
</code></pre>
When the object gets more complicated, extract it into a method.
<pre><code>v-bind:class=&quot;getClass()&quot;

methods:{
 getClass(){
 return {
 'fa-checkbox-marked': this.content['cravings'], 
 'fa-checkbox-blank-outline': !this.content['cravings']}
 }
}
</code></pre>
Finally, you could make this work for any content property like this.
<pre><code>v-bind:class=&quot;getClass('cravings')&quot;

methods:{
 getClass(property){
 return {
 'fa-checkbox-marked': this.content[property],
 'fa-checkbox-blank-outline': !this.content[property]
 }
 }
}
</code></pre>

blocks|key|2449042|text|<i+class="fa"+v-bind:class="cravings">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2449043|并加上计算：|unstyled|2449044|computed:+{
++++cravings:+function() {
++++++++return+this.content['cravings']+?+'fa-checkbox-marked'+:+'fa-checkbox-blank-outline';
++++}
}|2449045|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;i class="fa" v-bind:class="cravings"&gt;&lt;/i&gt;
</code></pre>

and add in computed :

<pre><code>computed: {
 cravings: function() {
 return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
 }
}
</code></pre>

blocks|key|987290|text|问题是刀刃，试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|987291|<i+class="fa"+v-bind:class="['{{content['cravings']}}'+?+'fa-checkbox-marked'+:+'fa-checkbox-blank-outline']">|code-block|syntax|javascript|987292|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

the problem is blade, try this 

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

blocks|key|2449088|text|为什么不将一个对象传递给v-bind:class来动态切换类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2449089|<div+v-bind:class="{+disabled:+order.cancelled_at+}"></div>|code-block|syntax|javascript|2449090|这是Vue文档推荐的内容。|offset|length|2449091|entityMap|0|LINK|mutability|MUTABLE|url|https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes^0|0|0|2|5|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Why not pass an object to v-bind:class to dynamically toggle the class:
<pre><code>&lt;div v-bind:class=&quot;{ disabled: order.cancelled_at }&quot;&gt;&lt;/div&gt;
</code></pre>
This is what is recommended by the <a href="https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes" rel="nofollow noreferrer">Vue docs</a>.

blocks|key|2449121|text|如果您想在Vue.js中为相同的元素应用单独的css类，那么在我的场景中使用的method.it可以使用下面的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2449122|html|2449123|+<div+class="Main"+v-bind:class="{+Sub:+page}"++>|code-block|syntax|javascript|2449124|在这里，Main和Sub是同一个div元素的两个不同的类名。v-+bind+:类指令用于绑定此处的子类。页面是我们用来更新类的属性，当它的值发生变化时。|2449125|js|2449126|data:{
page+:+true;
}|2449127|在这里，我们可以适用一个条件，如果我们需要。因此，如果页面属性变为true，元素将与主和Sub绑定css样式。但是，如果只有主类css样式才会被应用。|2449128|entityMap^0|5|6|0|0|4|0|0|4|4|9|3|U|A|1G|2|0|0|2|0|0|16|1|18|3|1Q|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|V|$]]

if you want to apply separate css classes for same element with conditions in Vue.js
you can use the below given method.it worked in my scenario.

html

<pre><code> &lt;div class="Main" v-bind:class="{ Sub: page}" &gt;
</code></pre>

in here, Main and Sub are two different class names for same div element.
v-bind:class directive is used to bind the sub class in here.
page is the property we use to update the classes when it's value changed.

js

<pre><code>data:{
page : true;
}
</code></pre>

here we can apply a condition if we needed.
so, if the page property becomes true element will go with Main and Sub claases css styles. but if false only Main class css styles will be applied.

blocks|key|735461|text|您可以使用字符串模板，比如backticks+：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|735462|:class="`${content['cravings']+?+'fa-checkbox-marked'+:+'fa-checkbox-blank-outline'}`"|code-block|syntax|javascript|735463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could use string template like with backticks `` :
<pre><code>:class=&quot;`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`&quot;
</code></pre>

I have some data that is accessible via:

<pre><code>{{ content['term_goes_here'] }}
</code></pre>

... and this evaluated to either <code>true</code> or <code>false</code>. I'd like to add a class depending on the truthiness of the expression like so:

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

where <code>true</code> gives me the class <code>fa-checkbox-marked</code> and false would give me <code>fa-checkbox-blank-outline</code>. The way I wrote it above gives me an error:

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

How should I write it to be able to conditionally determine the class?

Vue.js: Conditional class style binding

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一些可以通过以下途径获得的数据：{{ content['term_goes_here'] }}..。并将其评估为true或false。我想根据表达式的真实性添加一个类，如下所示：<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-m...

问Vue.js:条件类样式绑定
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js:条件类样式绑定EN