[Vuejs]-Apply conditional CSS to Vue

by

4👍

✅

Can be achieved using v-bind:class

<span v-bind:class="{'is-success': s.specialType==='food', 'is-danger': s.specialType==='drink'}" class="tag is-capitalized">
  {{s.specialType}}
</span>

Ref: https://v2.vuejs.org/v2/guide/class-and-style.html

👤Azzam Asghar

0👍

After a quick google search for conditional rendering, i came up with the following solution:

<div v-for="s in spc.specials" class="column is-one-third">
<div class="field">
  <span class="tag is-success is-capitalized" v-if="s.specialType === 'food'">
    {{s.specialType}}
  </span>
  <span class="tag is-danger is-capitalized" v-else-if="s.specialType === 'drink'">
    {{s.specialType}}
  </span>
</div>

Vue.js documentation

👤Thomas Scheffer

Leave a comment