Vue.js：条件类样式绑定

Posted 2023-02-16

【中文标题】Vue.js：条件类样式绑定

【英文标题】：Vue.js: Conditional class style binding

【发布时间】：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']"

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

【参考方案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'`"