前端代码优化-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 '上线';
  }
};