首页 > 编程语言 >直播带货源码,js实现整数和小数分开并添加不同的样式

直播带货源码,js实现整数和小数分开并添加不同的样式

时间:2022-10-31 14:25:29浏览次数:58  
标签:arr js 直播 tempStr font floatPrice 小数

直播带货源码,js实现整数和小数分开并添加不同的样式

1.思路

1. 提前写好整数部分和小数部分class样式

2. 再把数值转换成字符串形式,split() 方法用分隔符把整数和小数部分分割成数组

3. 处理应对接口返回数值的不同情况,考虑周全

2.代码实现

<template>
  <view>
     <text>{{ intPrice }}</text>
     <text>{{ floatPrice }}</text>
  </view>
</template>
<script>
   data(){
     return{
      floatPrice:''        
     } 
   },
   computed:{
     intPrice() {
      const str = this.renderDetail.pay_price + ''  //转成字符串
      const arr = str.split('.') //使用分隔符分割字符串成数组
      console.log(arr, 'arr')  // ["166", "88"] 
      let tempStr = arr[1] ? arr[1] : '00' //如果小数点后有值就用该值,没有默认'00'
      this.floatPrice = tempStr.length == 1 ? tempStr + '0' : tempStr //小数点后只有一位的话,补0
      return arr[0] + '.'
    }
 }
</script>
<style scoped>
    .intPrice {
      font-size: 30rpx;
      font-weight: bold;
    }
    .floatPrice {
      font-size: 24rpx;
      font-weight: bold;
    }
 </style>

​以上就是直播带货源码,js实现整数和小数分开并添加不同的样式, 更多内容欢迎关注之后的文章

 

标签:arr,js,直播,tempStr,font,floatPrice,小数
From: https://www.cnblogs.com/yunbaomengnan/p/16844089.html

相关文章

  • 视频直播网站源码,uniapp页面跳转的几种方法和区别
    视频直播网站源码,uniapp页面跳转的几种方法和区别1.保留当前页面,可跳转到非tabBar页面,使用uni.navigateBack可以返回到原页面(可传参) uni.navigateTo({url:'test?id......
  • js/react方法学习
    前言:最近看一个react工程,发现好多预发都不会,看代码如同雾里看花。 conststr='hello'constnewstr=str.split('').reduce(function(prev,current){const......
  • JavaScript打包下载最佳实践(StreamSaver.js+zip-stream.js流式下载)
    StreamSaver.js+zip-stream.js流式下载&压缩文件。部分浏览器(火狐)可能不兼容。1应用场景在实际项目中,通常存在用户手动选择下载多个文件的情况。常规的做法(服务器......
  • 终于学会了,SpringBoot整合JSP,建议收藏不然找不到了
    SpringBoot整合JSP,一个经典而且优雅的方案!步骤1pom.xml<!--servlet依赖.--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api<......
  • python3 - 使用 jieba3k 对直播平台房间标题进行分词
    python3安装jieba:pip3installjieba或者,先下载​​http://pypi.python.org/pypi/jieba/​​,解压后运行pythonsetup.pyinstall参考:​​https://github.com/fxsjy/......
  • IDEA版SpringBoot全教程 04 整合JSP
    <!--servlet依赖.--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId></dependency><dependency>......
  • 最简vue.js原理教程,适合初学者
    1.我们要做什么?早就想写这个了,和csdn高校俱乐部约好了有个直播,想着反正要备课,我不如直接把要讲的东西写成博客算了。说到vue,我们自然就想到数据绑定。说到数据绑定,自然就想......
  • windows 开机自动运行nodejs项目 pm2方法实现
    PM2是带有内置负载平衡器的Node.js应用程序的生产过程管理器。可以利用它来简化很多Node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等。安装部署1、我们一......
  • js常用方法和一些封装(2) -- 随机数生成
    任何编程语言,随机数都是必不可少的,我在开发过程中,尤其在自己做一些小玩意的时候,就经常使用随机数,后来发现每次使用都懒得写,直接去网上搜一个,拿过来就用了。可是时间一长,发现......
  • js进阶手写常见函数
    JavaScript进阶的必要性无论是学习react还是vue,它们都是js的应用框架。剥去他们的壳子看到的始终是js,所以作为一个前端大厨必须要熟练掌握好js这个大勺,才能烧出一顿好菜......