CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9869

change class depend on string values

I need to change div class depend on variable value. The problem that value can have multiples values that should be evaluated as true for me.

isActive: "yes"

can be: "true", "agree". How to add switch of class and accept all this three variants: "yes", "true", "agree"?

https://jsfiddle.net/ogx1pt3y/

Upvotes: 0

Views: 65

Answers (1)

thefallen
thefallen

Reputation: 9749

You can have a computed property where you return the correct class based on many conditions:

<p :class="paragraphClasses">{{ message }}</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    isActive: 'yes',
    shouldBeRed: true
  },
  computed: {
    paragraphClasses() {
      return this.isActive == 'yes' && this.shouldBeRed ? 'big' : 'small';
    }
  }
})

Upvotes: 1

Related Questions