vue v-bind:class example

by Luqman Rom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>


<div id="app">
  <label for="r1">Change colors</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class2}">
    directiva v-bind:class
  </div>
  <p>{{ class2 }}</p>
</div>

CSS

body{
  font-size: 1rem;
  font-family: arial;
}

.class1{
  background: #444;
  color: #eee;
}

JavaScript

new Vue({
	el: '#app',
  data:{
  	class1: false
  }
  ,
  computed: {
  		class2 : function() { 
      		return !this.class1
      }
  }
});