[Vuejs]-Using Vue Data to Contain CSS Element

by

2👍

✅

You can do it like this way.

<q-tooltip :content-class="[tooltipColor, 'text-black' ,'shadow-4']" :offset="[10, 10]"> Save </q-tooltip>
👤Qonvex620

3👍

I think that you have to use inline style like this.

<h1 :style="`background-color: ${myColor}`">Hello, Vue!</h1>

export default {
  data () {
    return {
      myColor: 'red'
    }
  }
}

Sample code

👤imb

1👍

You can pass any attributes with the v-bind directive. (Using : before an attribute is a shorthand for the v-bind. When you do v-bind, you need to pass a JavaScript expression. (Just like you’re doing in the :offset attribute)

<q-tooltip :content-class="contentClass" :offset="[10, 10]"> Exit </q-tooltip>

    computed: {
        contentClass() {
             return `${this.tooltipColor} text-black shadow-4`;
        }
    }
👤André Tzermias

Leave a comment