Vue.js：条件类样式绑定答案

【问题标题】：Vue.js: Conditional class style bindingVue.js：条件类样式绑定
【发布时间】：2017-08-29 20:19:59
【问题描述】：

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

{{ 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']"

我应该如何编写才能有条件地确定类？

【问题讨论】：

标签： javascript vue.js vuejs2 conditional-formatting

【解决方案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]
    }
  }
}

【讨论】：

我重构为：<i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>
@JeremyThomas 我会使用数组语法或对象语法，但可能不会同时使用。
是的，在他们的文档中看到混合语法让我有点惊讶。不是粉丝。
当被监视的属性来自外部源时，如何触发类绑定来更新，比如 vue-router 更改？（例如：this.$router.push('/homepage') 在另一个组件的其他地方调用）
@bigp 我希望您可以观看$route 的更改并根据需要更改您的课程。 router.vuejs.org/en/api/route-object.html

【解决方案2】：

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

并添加计算：

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

【讨论】：

我必须有太多的方法，因为大约有 20 个不同的术语
投票支持计算，它比在 html 标签中包含表达式要干净得多。

【解决方案3】：

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

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

这是Vue docs推荐的。

【讨论】：

【解决方案4】：

问题是刀片，试试这个

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

【讨论】：

【解决方案5】：

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

html

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

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

js

data:{
page : true;
}

如果需要，我们可以在这里应用条件。因此，如果页面属性变为 true 元素将使用 Main 和 Sub 分类 css 样式。但如果为 false，则仅应用 Main 类 CSS 样式。

【讨论】：

【解决方案6】：

你可以使用字符串模板，比如反引号``：

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

【讨论】：