前端代码优化-switch的使用

本文主要是介绍前端代码优化-switch的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

当我们需要根据这段的不同而展示不同的文字时，下面的写法太过于麻烦，同样的代码写了很多遍，这个时候就需要优化，如果判断的东西更多，总不能一个一个再写 判断 

<div class="alarm-detail-item" v-if="lastAlarmData.alarmType === '1'">动作 ：告警</div><div class="alarm-detail-item" v-else-if="lastAlarmData.alarmType === '2'">动作：动作</div><div class="alarm-detail-item" v-else-if="lastAlarmData.alarmType === '4'">动作：离线</div> <div class="alarm-detail-item" v-else>动作：上线</div>

可以怎么写，这样的话，你有更多的状态你也只需要在getActionText 这个函数这里去加判断了

 <div class="alarm-detail-item">动作：{{ getActionText(lastAlarmData.alarmType) }}</div>const getActionText = (alarmType: number) => {switch (alarmType) {case 1:return '告警';case 2:return '动作';case 4:return '离线';default:return '上线';}
};

这篇关于前端代码优化-switch的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---