#前端#Vue追加样式,实现动态进度条仪表盘

(xx:代表我们拿到的数值
-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

本文发布于:2024-09-21 17:52:17,感谢您对本站的认可!

本文链接:https://www.17tex.com/tex/4/344261.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:需要   数值   仪表盘
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议