[Vuejs]-How to add one more style based on condition inside this style binding? Vue.js

by

0👍

you might want to use a single computed property for all styles of this element. for example:

elementStyle(){
      const style = {}
      if(condition1){
        style['background-color'] = backgroundColorValue
      }
      if(condition2){
        style['color'] = colorValue
      }
      if(condition3){
        style['border-bottom'] = borderBottomValue
      }
      ....
      return style
    }

and in the template just do

:style="elementStyle"

0👍

In template

:style="styles"

In script

computed: {
  styles() {
    return isInCheckout
     ? { backgroundColor: bgColor, color: fColor, borderBottom: '2px' }
     : { 'background-color': bgColor, color: fColor }

  }
}

Leave a comment