Vue 2.0 Hello World

by Joe Cisneros

HTML

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>



<div id="app">
  <input v-model="sort" type="checkbox"/>
   <input v-model="descending" type="checkbox"/>
   Sort: {{sort}}, Descending: {{descending}}
  <span v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
  <span v-else-if="sort"><i class="fas fa-sort-down"></i></span>
  <span v-else><i class="fas fa-sort"></i></span>
  <i class="fas fa-sort"></i>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    sort: false,
    descending: false
   }
})