使用vue js动态更改CSS类

Question

我已经使用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(循环外).先谢谢你

Answer 1

你可以使用动态样式的 vuejs进行以下操作:

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

来自文档:

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

上面的语法意味着活动类的存在将由数据属性isActive的真实性决定.你也可以把简单的条件返回布尔代替isActive