VueJS Styles

by PlĂ­nio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p :class="getClasses" :style="getStyles()">VueJS Styles</p>
  <button @click="active=!active">Show/hide class</button>
  <button @click="color = (color === 'red') ? 'blue' : 'red'">Change color class</button>
</div>

CSS

.active {
  background-color: orange;
}

JavaScript

var myVue = new Vue({
	el: '#app',
  data: {
  	active: true,
    color: 'red'
  },
  methods: {
  	getStyles: function() {
    	console.log('Method');
    	return {
      	color: this.color
      }
    }
  },
  computed: {
  	getClasses: function() {
    	console.log('Computed');
    	return {
      	active: this.active
      }
    }
  }
});