[Vuejs]-Binding 'color' attribute of div element to 'color' data property in Vue.js

by

1👍

I think you want to set text color (CSS color attribute), right?

 <div :style="{color: color}"></div>

The colon at the beginning of :style makes it an attribute handled as vue expression. :style is a special attribute in that it takes an object where keys are css properties in camel case (i.e. borderRadius) and values are expressions, like the value of your color variable. Have a look at class and style bindings in vue

👤Moritz Ringler

0👍

The data needs to return an object, like this:

data: function () {
    return {
        count: 0
    }
}
👤Alexandre Heinen

0👍

To bind the inline CSS styles, You have to use Object Syntax binding as v-bind:color is not a pre defined directive in Vue.

Hence, This solution will work fine as per your requirement.

<div :style="{ 'color': color }"></div>

Live Demo :

new Vue({
  el: '#app',
  data: {
    color: 'red'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :style="{ 'color': color }">Hello VueJS!</div>
</div>
👤Debug Diva

Leave a comment