狀態切換的優雅表達

今天寫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的單頁應用。