Vue get/set interface

by Edward Tanguay

HTML

<div id="vue">
  <div v-bind:class="{highlighted: isImported}">
    syntax 1: apply-class-if-true
  </div>
  <div v-bind:class="{highlighted: isImported, 'double-highlighted':isSaved}">
    syntax 2: multiple apply-class-if-true
  </div>
</div>

CSS

.highlighted {
  background-color: yellow;
}
.double-highlighted {
  font-weight: bold;
}

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
    	isImported: true,
      isSaved: true
    }
  }
})