VUE,数字状态转换为中文、根据不同状态显示不同颜色、element icon的自定义颜色

在页面根据数字显示中文状态、根据不同状态显示不同颜色

背景：
用VUE进行测试工具的前端页面开发。
在测试工具开发中，测用例有不同的测试结果，需要在页面提现出来
需求：
1、根据后台返回的数字状态，转换为中文。比如用例的状态字段，后台返回的状态是0、1、2、3，要转换成：用例执行状态0未执行,1.执行中;2.执行完成;3.执行失败
2、根据不同的状态，显示不同的颜色

根据数字显示不同的中文，这个好解决。这个时候，自己写一个常量，转换就行。例子如下：

//html
<b style="color:#3c3c3c" v-show="caseStatus == 0">{{caseStatusArr[caseStatus]}}</b>
 <b style="color:#0099FF" v-show="caseStatus == 1">{{caseStatusArr[caseStatus]}}</b>
<b style="color:#3cb371" v-show="caseStatus == 2">{{caseStatusArr[caseStatus]}}</b>
 <b style="color:#CC3333" v-show="caseStatus == 3">{{caseStatusArr[caseStatus]}}</b>

//js,caseStatusArr
                caseStatusArr:{
                    0:"未执行",
                    1:"执行中",
                    2:"执行成功",
                    3:"执行失败",
                },

关键在caseStatusArr，将已知的后台的状态列举出来。
这里的v-show，是用最笨的方法，哪个状态显示哪个颜色。
比如caseStatus =0的时候，文本颜色：style=“color:#3c3c3c”；
比如caseStatus =2的时候，文本颜色：style=“color:#3cb371”

颜色从哪里来？从w3school
https://www.w3school.com.cn/css/css_colors_hex.asp

下面是页面的效果图

element 的icon是否可以改变颜色、大小？

在用到element的icon时候，确实很方便，很多不同的Icon。
比如，我是这样用的

<i class="el-icon-time"  ></i>

这个时候，发现提供的icon，都是灰色

然后就想办法，能不能有办法改变？
就想到了文本处理的时候，我们用到了style，icon是否也可以？要改变大小，文本的font-size是否也可以？
于是尝试。。。。
经过尝试，真的可以。看：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.2/lib/index.js"></script>
<div id="app">
<i class="el-icon-edit"></i>
 <br>
<i class="el-icon-share"></i>
 <br>
<i class="el-icon-delete"></i>
<br>
<i class="el-icon-time"  style="color:#787878;" >&#8194</i>
<br>
<i class="el-icon-success"  style="color:#3cb371;" v>&#8194</i>
  <br>
<i class="el-icon-loading"  style="color:#0099FF;font-size:20px" ></i>
  <br>
<i class="el-icon-error"  style="color:#CC3333;font-size:30px" ></i>
  <br>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>

效果图：