我可以在v-on中創建一些條件：點擊？

Question

我有一種情況是，當我點擊它時，我想改變li標籤的類，但是在某些情況下需要的是本來活動的類。如何使它工作？這裏是我的代碼：

var demo = new Vue({ 
    el: '#demo', 
    data: function(){ 
     return { 
     hourlySlots: [ 
      { 'Status' : 'unavailable', name: "john" }, 
      { 'Status' : 'available' , name: "Danny" }   
     ] 
     }; 
    }, 
    methods: { 
     selectSlot: function(timeslot) { 
     if(timeslot.Status =='available'){ 
      timeslot.Status ='selected' 
     } 
     } 
    } 
}) 

工作小提琴：

<li v-for="timeslot in hourly.Slots" class="time-slot" 
    v-bind:class="{'selected': timeslot.Status=='selected', 'unavailable': timeslot.Status =='unavailable', 
    'active': timeslot.Status=='available'}" v-on:click="timeslot.Status='selected'"> 

Answer 1

這可以通過調用點擊一個方法，在這種方法進行校驗時隙是否可用，像下面做http://jsfiddle.net/5dkw58ke/