How to achieve Styles Binding in Vue.js?

Style Binding in Vue.js

Binding Styles in Vue.js is as similar as Binding Classes. We did see it in the previous post how to bind CSS classes to the HTML. In order to get started let’s learn the way in which v-bind comes to rescue out here. The simple way to use v-bind:style in conjunction so as to get the show started.

Simple Style Binding in Vue.js

Have a look at the code below. This code helps you to bind the style directly to the DOM element and is totally hassle free. You can bind any property using this particular syntax.

Did you check out the awesome article on Class Binding in Vue.js?

HTML

<div v-bind:style="{color:'red',fontSize:'25px'}">
    Simple Style Binding 
  </div>

The Vue.js Code associated with this is also generic where you just define an app and it works as such.

Vue.js

var app = new Vue({
  el: '#app',
  data: {
  }
});

This syntax comes out of the box for any Vue.js Application.

Object based Style Binging in Vue.js

In Object based style binding you just need to externalize the properties of the style of an element as the data property of it. You can very well make it an object to further externalize and generalize the code. Let’s see this in action.

HTML

<div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">
    Style binding using property Values
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    textColor: 'green',
    fontSize: 30,
  }
});

The above code leads to externalized properties and these properties are being now managed by the component itself. These can be further externalized in order to create a component that takes these properties from some other component. For more on components, check out the tutorial on the to do list. You can also have a look at the Global Event Bus in order to do more component to component interaction. Now let’s have a look at how we can externalize the entire object as a property and modify the code a bit.

HTML

<div v-bind:style="styleObject">
    Style binding using Object as property
  </div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'yellow',
      fontSize: '50px'
    }
  }
});

The above code also gives the same effect. This has further simplified the Vue.js template code and made it cleaner. This way you can also have a good control over the Data Property and as well manage it out properly.

Array based Syntax for Style Binding in Vue.js

The last method of binding is the Array based binding. This style binding is really helpful in Various situations where one can add properties or remove various properties from the style. You can have multiple style objects being concatenated together in order to bind things out. Let’s have a look at the Structure of it.

HTML

<div v-bind:style="[styleObject,textStyle]">
    Array Syntax for Adding Style
  </div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'yellow',
      fontSize: '50px'
    },
    textStyle: {
      fontWeight: 'bold',
      color: 'blue !important'
    }
  }
});

As we see the above code, one can go ahead and work with this in order to manage the multiple styles across. You can manipulate the HTML properties using this out.

NOTE: Vue has the capability to auto prefix the vendor prefixes in case you have added a property that requires it.

Conclusion

Let’s wrap it up by seeing the complete sample application on JSFiddle as we do most of the time.

This is a working sample of the code and you can have a look at the different variants of the above-mentioned code. We have covered the three most popularly used format of style bindings. Have a look and let us know your views about the Tutorial.

Vue JS BASICS Web Series

Originally published at The Web Juice.