根据后端返回不同数据显示不同颜色

1、需求

当前状态为充电时，显示"#15BC83"，放电时显示"#FF811A"，其他情况显示red。

2、代码

<div :style="{ color: styleColorFn(status) }">
 {{ status }}
</div>

methods: {
  styleColorFn (type) {
    switch (type) {
      case "充电":
        return "#15BC83"
      case "放电":
        return "#FF811A"
      default:
        return "red"
    }
  }
},