html:
<div class="rateCard" v-for="item in rateList1">
<div class="rateCard1 ha">{{item.target_type}}</div>
<div class="rateCard4"></div>
<div class="rateCard3"></div>
<div class="rateCard2">
<div class="rateCard2_1">
<span class="ha rateCard2_1_span1">目前狀態:</span>
<span class="ha detailClick" @click="detail">详情</span>
</div>
<div class="mLine"></div>
<div class="rateCard2_2">
<span class="ha rateCard2_2_span2">目標:<span style="color:#0f0">98%</span></span>
<div v-for="items in item.target_detail">
<div v-if="items.index==0">
<span class="ha rateCard2_2_span1">T-1</span>
<i-progress class="progress2" :percent=items.result></i-progress>
</div>
<div v-else-if="items.index==1">
<span class="ha rateCard2_2_span1">T-2</span>
<i-progress class="progress2" :percent=items.result></i-progress>
</div>
<div v-else-if="items.index==2">
<span class="ha rateCard2_2_span1" style="marginBottom:5px">T-3</span>
<i-progress class="progress2" :percent=items.result></i-progress>
</div>
</div>
</div>
</div>
</div>
1.避免进度条为100%时显示状态对号的图片任让其显示100%
<i-progress class="progress1 mPercent" :percent="percent">
<span>{{percent}}%</span>
</i-progress>
2.根据状态让其显示不同渐变颜色
<div id="app">
<div v-if='aa==100'><i-progress :percent=aa :stroke-color="['#0f0','#0f0']" > <span>{{aa}}%</span></i-progress> </div>
<div v-else-if='aa>=90'><i-progress :percent=aa :stroke-color="['#f78603','#0f0']" /> </div>
<div v-else><i-progress :percent=aa :stroke-color="['#f00','#f78603']" /> </div>
</div>
var Main = {
data(){
return {
aa:99
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')