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/

여기 내 코드입니다