Vue.js:条件类样式

Question

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

{{ 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和假会给我fa-checkbox-blank-outline.我上面写的方式给了我一个错误:

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

我该怎么写它才能有条件地确定课程？

Answer 1

使用对象语法.

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

Answer 2

<i class="fa" v-bind:class="cravings"></i>

并添加计算:

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

Answer 3

为什么不将对象传递给v-bind:class来动态切换类:

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

这是Vue文档推荐的内容.

Answer 4

您可以使用如下所示的带有反引号 `` 的字符串模板：

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"

Answer 5

如果你想在Vue.js中为具有条件的同一元素应用单独的 css 类 ，你可以使用下面给出的方法。它在我的场景中有效。

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

在这里，Main和Sub是同一个 div 元素的两个不同的类名。 v-bind:class指令用于在这里绑定子类。 page是我们用来在值更改时更新类的属性。

js

data:{
page : true;
}

如果需要，我们可以在这里应用一个条件。因此，如果 page 属性变为 true 元素将采用Main和Sub claases css 样式。但如果为 false，则仅应用主类 css 样式。

Answer 6

问题是刀片，请尝试此

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