Vue get/set interface

by Edward Tanguay

HTML

<div id="vue">
  <div :class="{highlighted: isImported}">
    syntax 1: apply-class-if-true
  </div>
  <div :class="{highlighted: loggedIn && totalProcessed >= processGoal}">
    syntax 2: apply-class-if-expression
  </div>
  <div :class="{highlighted: isImported, 'double-highlighted':isSaved}">
    syntax 3: multiple apply-class-if-true
  </div>
  <div :class="[highlightClass, doubleHighlightClass]">
    syntax 4: list of classes as array
  </div>
  <div :class="[isAdministrator ? 'highlighted-administrator' : 'highlighted']">
    syntax 5: ternary operator
  </div>
  <div :class="[isAdministrator ? 'highlighted-administrator' : 'highlighted', isWrong ? 'error': '']">
    syntax 6: multiple ternary operators
  </div>
</div>

CSS

.highlighted {
  background-color: yellow;
}
.highlighted-administrator {
  background-color: orange;
}
.double-highlighted {
  font-weight: bold;
}
.double-highlighted-administrator {
  font-style: italic;
}
.error {
  color:red;
}

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
    	isImported: true,
      isSaved: true,
      highlightClass: 'highlighted-administrator',
      doubleHighlightClass: 'double-highlighted-administrator',
      isAdministrator: false,
      isWrong: true,
      loggedIn: true,
      totalProcessed: 48,
      processGoal: 50
    }
  }
})