我可以在v-on中制作一些条件:点击？

Question

我有一个情况是,当我点击它时我想改变li标签的类,但是在某些条件下需要最初的类激活.如何使其工作？这是我的代码:

<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

这可以通过单击调用方法来完成,并检查该方法是否可用时隙,如下所示:

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'
        } 
      }
    }
})

工作小提琴:http://jsfiddle.net/5dkw58ke/

Answer 2

我认为可以通过使用三元运算符来实现。

v-on:click="
  timeslot.Status == 'available' ?
    timeslot.Status = 'selected' :
    ''
"

http://jsfiddle.net/yrejhmp9/1/

或使用逻辑运算符。

v-on:click="
  timeslot.Status == 'available' &&
  (timeslot.Status = 'selected')
"

http://jsfiddle.net/mrgt82ke/1/