使用 vue js 动态更改 CSS 类

【问题标题】：Changing CSS classes dynamically with vue js使用 vue js 动态更改 CSS 类
【发布时间】：2016-12-30 14:18:53
【问题描述】：

我已经使用 vue 大约一个月了，但是我还没有真正能够正确完成的一件事就是这个。

所以在树枝中我们可以做这样的事情

<th class=" 
  {% if condition %}
      class1
  {% else %}      
      class2
  {% end if %}  
">

<th class="sorting_asc" v-for="col in columns" v-if="col.label == sortKey">
<th class="sorting" v-for="col in columns" v-else>

所以我的第一个问题是我似乎无法在 Vue js 中实现类似的功能。其次，我写了'v-if="col.label == sortKey"'，我什至可以在html块之外（循环外）访问汽车col.label。提前谢谢你

【问题讨论】：

标签： javascript class styling vue.js

【解决方案1】：

您可以使用 dynamic styling 使用 vuejs 进行以下操作：

<th v-bind:class="{'class1': condition, 'class2': !condition}">

来自文档：

<div v-bind:class="{ active: isActive }"></div>

上述语法意味着活动类的存在将由数据属性isActive的真实性决定。您也可以将返回布尔值的简单条件替换为 isActive

【讨论】：

但是还有一个问题不清楚。如果有的话，我可以使用 ${ col.label } 吗？因为该值来自 for 循环
@TheMan68 我相信您要求这样做：<th class="{'sorting_asc': col.label == sortKey, 'sorting': col.label != sortKey}" v-for="col in columns"
为了完整起见，也可以在示例中使用三元表达式：<th v-bind:class="[condition ? class1 : class2]">。