-20<xx<=-6
-6<xx<=3sb4
3<xx<=9
那么我们就可以将他们分为3段,如果返回的数值在这些区间⾥⾯,就追加样式,
:
:
:
⽰例代码:
1<view >
2 <view class="bubble"
tz15
3 v-if="TZList.bmr > -20 && TZList.bmr <= -6 ":>
4 <image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
5 <view class="num">{{TZList.bmr}}</view>
6 </view>扭力梁式半独立悬架
7 <view class="bubble" v-if="TZList.bmr > -6 && TZList.bmr <= 3 ":>
8 <image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
9 <view class="num">{{TZList.bmr}}</view>
10 </view>
11 <view class="bubble" v-if="TZList.bmr > 3 && TZList.bmr < 9 ":>
12 <image :src="baseUrl + '/profile/upload/2021/10/30/chat.png'"></image>
13 <view class="num">{{TZList.bmr}}</view>
14 </view>
棉絮加工
15</view>
2.3使⽤插件赋值
使⽤插件,只需要到控制动态修改样式的参数,进⾏赋值,也需要注意取整 只需要将返回的数值*33.3填⼊,就可以动态控制:percent="",这个参数值了
1<view class="user-test">
2 <view class="line">
3 <!-- //体态仪表盘 -->
4 <cmd-progress type="dashboard" :percent="parseInt(roleAssessmentLevel)*33.3" stroke-color="#ED6636"
5 width="160" gap-degree="140" class="tt-item" :show-info="false" stroke-width="6"></cmd-progress>
6 <!-- //体质仪表盘 -->
射线灯7 <cmd-progress type="dashboard" :percent="parseInt(bmiGrade)*25" stroke-color="#18B566" width="140"
8 gap-degree="155" class="tz-item" :show-info="false" stroke-width="6"></cmd-progress>
导游扩音器9 <!-- //体能仪表盘 -->
10 <cmd-progress type="dashboard" :percent="parseInt(assessmentLevel)*33" stroke-color="#007AFF"
11 width="120" gap-degree="170" class="tn-item" :show-info="false" stroke-width="6"></cmd-progress>
12 </view>
13 <view class="test-num">
14 <view>体态状况:{{ roleAssessmentValue}}</view>
15 <view>体质状况:{{ bmiL }}</view>
16 <view>体能状况:{{ assessmentValue }}</view>
17 </view>
18