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

时间:2016-12-01 02:17:17

标签: javascript vue.js

我有一种情况是我想在点击它时更改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'">

2 个答案:

答案 0 :(得分:5)

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

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/

答案 1 :(得分:1)

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

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/