直播带货源码,js实现整数和小数分开并添加不同的样式
直播带货源码,js实现整数和小数分开并添加不同的样式
1.思路
1. 提前写好整数部分和小数部分class样式
2. 再把数值转换成字符串形式,split() 方法用分隔符把整数和小数部分分割成数组
3. 处理应对接口返回数值的不同情况,考虑周全
2.代码实现
1 | <template><br> <view><br> <text>{{ intPrice }}</text><br> <text>{{ floatPrice }}</text><br> </view><br></template><br><script><br> data(){<br> return {<br> floatPrice: '' <br> } <br> },<br> computed:{<br> intPrice() {<br> const str = this.renderDetail.pay_price + '' //转成字符串<br> const arr = str.split('.') //使用分隔符分割字符串成数组<br> console.log(arr, 'arr') // ["166", "88"] <br> let tempStr = arr[1] ? arr[1] : '00' //如果小数点后有值就用该值,没有默认'00'<br> this.floatPrice = tempStr.length == 1 ? tempStr + '0' : tempStr //小数点后只有一位的话,补0<br> return arr[0] + '.'<br> }<br> }<br></script><br><style scoped><br> .intPrice {<br> font-size: 30rpx;<br> font-weight: bold;<br> }<br> .floatPrice {<br> font-size: 24rpx;<br> font-weight: bold;<br> }<br> </style> |
以上就是直播带货源码,js实现整数和小数分开并添加不同的样式, 更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现