dynamic style in vue

by RomainMazB

HTML

<div id="app">

<span id="el" v-bind:style="spanStyle">this is a class span</span>
<button v-on:click="changeColors()">
Click to change colors
</button>
</div>

JavaScript

var vm = new Vue({
  el: "#app",
  data: {
    spanStyle: {
      fontSize: "36px",
      color: null,
      border: null
    }
  },
  methods: {
  	changeColors() {
    	this.spanStyle.color = (this.spanStyle.color == 'red') ? 'blue' : 'red';
      
    	this.spanStyle.border = (this.spanStyle.border == '3px solid blue') ? '3px solid red' : '3px solid blue';
    }
  }
});