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="selectSlot(timeslot)">
   {{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"  },        
        ]
      };
    },
    methods: {
      selectSlot: function(timeslot) {
        if(timeslot.Status =='available'){
        	timeslot.Status ='selected'
        } 
      }
    }
})