今天写vue的时候,遇到一个状态切换的问题,简单示例如下:
<div v-class="item.status" v-on:click="toggleStatus(index,item.status)" v-for="(item,index) in lists">状态切换</div>
没错,就是这样一个栩栩如生的例子。
satus
的值为"off"
和"on"
二者中的一个。
先来看看不优雅的写法
function toggleStatus(index,status){
lists[index].status = status === 'on' ? 'off' : 'on';
}
没错,三目表达式,看起来很精简,不过好像不是那么地优雅,我们试试下面这种。
function toggleStatus(index,status){
lists[index].status = {'on':'off','off':'on'}[status];
}
这样是不是更优雅呢?
再增加点难度,我们要实现一个,红黄绿交通指示灯。
function toggleStatus(currentStatus){
return {
'red':'yellow',
'yellow':'green',
'green':'red'
}[currentStatus];
}
var nextStatus1 = toggleStatus('red');
console.log(nextStatus1);
var nextStatus2 = toggleStatus(nextStatus1);
console.log(nextStatus2);
var nextStatus3 = toggleStatus(nextStatus2);
console.log(nextStatus3);
var nextStatus4 = toggleStatus(nextStatus3);
console.log(nextStatus4);
我是陈随易,技术交流可以加我c91374286
。
如果你是个好人,可以给我的项目点个star YIVUE,用简单易懂的方式,开发基于VUE的单页应用。