状态切换的优雅表达

420 阅读1分钟

今天写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的单页应用。