CODEWITHSUNDEEP
javascriptclassstylingvue.js
TheMan68
TheMan68

Reputation: 1469

Changing CSS classes dynamically with vue js

I have been using vue for about a month now but one thing that I haven't really been able to do properly yet is this.

so in twig we can do something like this 

<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>

So my first issue is I can't seem to be able to achieve something similar in Vue js. And secondly where I've written 'v-if="col.label == sortKey"', Can I even access the car col.label outside of the html block (outside the loop). Thank you in advanced

Upvotes: 7

Views: 20252

Answers (1)

Saurabh
Saurabh

Reputation: 73589

You can do following with vuejs with dynamic styling:

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

From documentation:

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

The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive. you can as well put simple conditions returning boolean in place of isActive

Upvotes: 15

Related Questions