Question

我有一种情况是我想在点击它时更改li标签的类，但是在某些条件下需要原来是class active。如何使其工作？这是我的代码：

<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/

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

2 个答案: