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';
                }  
            }