1.效果图

2.下面为封装好的代码，在页面中引入即可 html

<template>
    <div id="flip-container" v-if="flag == false">
        <div id="digit-1"
             class="digit">0</div>
        <div id="digit-2"
             class="digit">0</div>
        <div id="digit-3"
             class="digit">0</div>
        <div id="digit-4"
             class="digit">0</div>
        <!-- <div id="digit-5" 
             class="digit" 
             >0</div> -->

    </div>
    <div id="flip-container" v-if="flag">
        <div id="digit-1"
             class="digit">0</div>
        <div id="digit-2"
             class="digit">0</div>
        <div id="digit-3"
             class="digit">0</div>
        <div id="digit-4"
             class="digit">0</div>
        <div id="digit-5" 
             class="digit" 
             >0</div>
    </div>
</template>

3.javaScript

<script setup>
    import {onMounted,defineProps} from 'vue'
    // defineProps中括号的值是传值页面等号左边的值
    const props = defineProps(['data'])
    let flag = false
    var data1 = props.data
    data1 = digitize(data1)
        if (data1.length == 4) {
            // flag = false
        } else if (data1.length == 5) {
            flag = true
        }
    
    
    function digitize (n) {  //接受一个number类参数，拆分成一个数组并返回
        var str = n + "";    //加上空字符中，把接收的参数转换为字符串
        var arr = [];         //声明结果空数组，稍后返回
        str.split("").forEach(function (item) {   //调用split，以空字符串为分隔符切割字符串并返回数组，在数组上调用forEach方法
            arr.push(parseInt(item));    //对传入的每个字符用pasreInt转换为数字并压入arr数组
        })
        return arr;  //返回结果数组
    }
    
    
    function fetchData(){
        // 遍历每一位数字
        for (var i = 0; i < data1.length; i++) {
            var digitElement = document.getElementById('digit-' + (i + 1));
            var currentDigit = parseInt(digitElement.innerText);
            var newDigit = parseInt(data1[i]);

            // 如果当前数字和新数字不相等，则翻转数字
            if (currentDigit !== newDigit) {
                
                digitElement.classList.add('flipped');

                // 使用 setTimeout 延迟恢复正常状态，等待翻转动画完成
                (function (element, digit) {
                    setTimeout(function () {
                        element.innerText = digit;
                        element.classList.remove('flipped');
                    }, 500);
                })(digitElement, newDigit);
            }
        }
       
       
    }


    onMounted(()=>{
        fetchData()
    })
</script>

4.css

<style>
#flip-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	margin-left: 8px;
}

.digit {
	width: 15px;
	height: 33px;
	background-color: #1488cc;
	color: #00ffff;
	font-size: 20px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	margin-left: 5px;
	transition: transform 1s ease-in-out;
	border-radius: 2.5696px;
	line-height: 33px;
}

.digit.flipped {
	transform: rotateX(180deg);
}
</style>

5.需要页面引入即可

<flipper v-if="fourTodayTotalWeightFlag" :data="todayTotalWeight"></flipper>
                            <div>当日收货量(Kg)</div>

import flipper from '@/components/flipper/flipper.vue'