The very first Vue.js example

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <li v-for="timeslot in hourlySlots" class="time-slot" 
      v-bind:class="{
        'selected': timeslot.Status == 'selected',
        'unavailable': timeslot.Status == 'unavailable', 
        'active': timeslot.Status == 'available'
       }"
       v-on:click="
         timeslot.Status == 'available' &&
         (timeslot.Status = 'selected')
       "
    >
    {{ timeslot.name }}
   </li>
</div>

CSS

.time-slot{
  pointer: cursor;
}

.selected {
  color: green;
}

.active{
  color: blue;
}
.unavailable{
  color: red;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: function(){
    	return {
      	hourlySlots: [
        { 'Status' : 'unavailable', name: "john" },
        { 'Status' : 'available' , name: "Danny" },        
        { 'Status' : 'unavailable', name: "Abhraham"  },
        { 'Status' : 'available', name: "White"  },
        { 'Status' : 'unavailable', name: "Sammy"  },        
        ]
      };
    }
})