Vue.js: 条件 class 样式绑定

Question

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

{{ content['term_goes_here'] }}

... 并且此计算结果为 true 或 false。我想根据表达式的真实性添加一个 class，如下所示：

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

其中 true 给我 class fa-checkbox-marked 而 false 会给我 fa-checkbox-blank-outline。我上面写的方式给我一个错误：

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

应该怎么写才能有条件的判断class?

Answer 1

使用 object syntax.

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

问题是 blade，试试这个

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

Answer 4

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

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

这是 Vue docs 推荐的。

Answer 5

如果您想对具有 Vue.js 中条件的同一元素应用单独的 css classes 你可以使用下面给定的 method.it 在我的场景中工作。

html

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

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

js

data:{
page : true;
}

如果需要，我们可以在此处应用条件。因此，如果页面属性变为真，元素将与 Main 和 Sub claases css样式。但如果为 false，则只会应用 Main class css 样式。

Answer 6

您可以使用带反引号的字符串模板 `` :

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

Vue.js: 条件 class 样式绑定

Vue.js: Conditional class style binding

javascript

conditional-formatting

vue.js

vuejs2