Vue 动态绑定CSS样式

   今天在做项目上遇见了一个需求，通过不能的进度类型展示不同的进度形态，进度形态通过背景色和背景色上的文字显示。

效果图：

 

 

由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9.2及更高版本的format属性，format属性：自定义进度条的文本内容

所以就只能自己实现类似于进度条的形状：

实现步骤：

1.定义一个p标签，p标签里面包含显示文本的a标签，内显文字显示为白色

<p class="rcorners4" :style="scope.row.firstQuarterSpeedofProgress|getBackgroundColor"><a style="color:white">{{scope.row.firstQuarterSpeedofProgress|getSpeedofProgress}}</a></p> 

 2.定义基本rcorners4样式

 .rcorners4 {
    text-align: center;
    border-radius: 50px 50px 50px 50px;  
    width: 80px;
    height: 26px; 
   } 

3.通过Vue过滤器实现动态切换颜色及文本文字

            getSpeedofProgress(val){
              if(val==1){return '已完成'}
              if(val==2){return '应完未完'}
              if(val==3){return '进度滞后'}
              if(val==4){return '正常推进'}
            }, 
            getBackgroundColor(val){ 
                 switch(val){
                    case 1: return 'background: #22A7FF';break
                    case 2: return 'background: red';break
                    case 3: return 'background: #EEEE11';break
                    case 4: return 'background: #2BD54D';break
                    default:return 'background: white';
                }  
            }