JSFiddle Style Binding Sample

JSFiddle Style Binding Sample

HTML

<div id="app">
  <div v-bind:style="{color:'red',fontSize:'25px'}">
    Simple Style Binding
  </div>
  <hr>
  <div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">
    Style binding using property Values
  </div>
  <hr>
  <div v-bind:style="styleObject">
    Style binding using Object as property
  </div>
  <hr>
  <div v-bind:style="textStyle">
    Array Syntax for Adding Style
  </div>
</div>

JavaScript

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