使用vue綁定數據結合bootstrap實現功能

問題：今天使用bootstrap4中的progress滾動條插件，實現數據綁定他對應的width數值從而實現填充的顯示。但是出現的問題是style中width寬度綁定不上。

想要達到效果如下：

1. 我的data 參數格式是數值型
2. 要結合vuestyle綁定樣式參考使用，參考文檔

首先做出css樣式：

<div class="progress">
  <div class="progress-bar" role="progressbar" 
  style="width: 25%;" aria-valuenow="25" 
  aria-valuemin="0" aria-valuemax="100">
  25%
  </div>
</div>

顯示效果：

然後我們在寬度上寫靜態數值，使用vue綁定style看能否實現效果

• 綁定style:style
• bootstrap4中滾動條中width是以數字+%的形式進行拼接顯示的，我們要達到該效果也要使用相同形式（不能更改顯示形式如width：80px）

<td style="white-space:pre-wrap;">
    <div class="progress ">
         <div class="progress-bar bg-info" role="progressbar" 
         :style="{width: 80 + '%'}" :aria-valuenow="detail.h_r_score" 
         aria-valuemin="0" aria-valuemax="100">
                        {{detail.h_r_score}}%
          </div>
  	</div>
</td>

顯示效果：

如上圖，我們不看填充上的顏色單獨看填充是否佔有80%的效果是成功的，之後我們使用Vue中style綁定達到不同數值顯示填充的多少不同的效果

• :style="{width: detail.h_r_score + '%'}" width內是參數+%使用拼接。
  參考

		<div 
		v-bind:style="{ color: activeColor, 
		fontSize: fontSize + 'px' }"></div>
   		data: {
   		activeColor: 'red',
   		fontSize: 30
   		}

最後使用的代碼片段：

<td style="white-space:pre-wrap;">
    <div class="progress ">
         <div class="progress-bar bg-info" 
         role="progressbar" 
         :style="{width: detail.h_r_score + '%'}" 
         :aria-valuenow="detail.h_r_score" 
         aria-valuemin="0" aria-valuemax="100">
                        {{detail.h_r_score}}%
         </div>
  </div>
</td>