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