使用 vue js 动态更改 CSS 类

Question

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

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

<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 进行以下操作 dynamic styling:

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

来自文档：

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

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

使用 vue js 动态更改 CSS 类

Changing CSS classes dynamically with vue js

javascript

class

styling

vue.js