[每天进步一点点~] uni-app 实现价格小数点前后字体大小不同、js判断数值中是否带小数点...

本文链接：https://blog.csdn.net/DarlingYL/article/details/114525450

效果图

代码：

<template>
    <view class="">
        <view class="" style="fontSize:10px ">
            ￥<text style="fontSize:20px ">{{ frontPrice }}</text>
              <text v-show="isDot">.</text>
              <text>{{ backPrice }}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                price:'337.90',
                // price:'337',
                frontPrice:'',
                backPrice:'',
                isDot: true,
                
            }
        },
        onShow(e) {
            this.totalprice(this.price)
        },
        methods: {
            totalprice(num) {
                // 判断是否有小数点
                if(!isNaN(num)){ // 判断 number类型的数字是不是NaN，因为NaN也是number类型
                    this.isDot = ( (num + '').indexOf('.') != -1 );  // 加一个空字符串 = 强转string类型；
                    // indexOf方法，判断字符串中是否存在某个值，存在则返回存在位置的下标(小数点的下标位置是0)，不存在则返回-1，
                    // 这里是判断是否存在小数点，数值377无小数点所以返回-1，377.90存在小数点所以返回 3 
                    // console.log((num + '').indexOf('.'));
                }
                if (this.isDot) {
                    // 分割价钱 => ["337", "90"]
                    let splitPrice = num.split(".");
                    this.frontPrice = splitPrice[0]
                    this.backPrice = splitPrice[1]
                } else {
                    this.frontPrice = num
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    
</style>