change class depend on string values

Question

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/

thefallen · Accepted Answer · 2018-08-27 11:10:06Z

1

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';
    }
  }
})

answered Aug 27, 2018 at 11:10

thefallen

9,8102 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change class depend on string values

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related