<template>
    <div class="number">
        <ul id="dataNums">
            <li v-for="(item,index) in list" :key="index">
                <div class="dataBoc">
                    <div class="tt"
                        :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}">
                        <span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>

                    </div>

                </div>

            </li>

        </ul>

    </div>

</template>

js部分

export default {
        props:{
        	number:Number
        },
        data(){
            return{
                list:[],
                numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.']
            }
        },
        mounted(){
            this.scroll();
        },
        methods:{
            scroll(){
                this.list=this.number.toString().split('');
                let arr=[];
                this.list.forEach((value) => {
                    arr.push({
                        num:value,
                        top:0
                    })
                });
                this.list=arr;
                let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height);
                this.list.forEach((value,index) => {
                    setTimeout(()=>{
                        value.top=parseFloat((value.num*Hei)+(Hei*10));
                    },index*300);
                });
            }
        }
    }

css样式

    .number {
        margin-bottom: 10px;
        text-align: center;

        ul {
            display: inline-block;
            height: 40px;
            text-align: center;
            li {
                float: left;
                width: 40px;
                height: 40px;
                text-align: center;
                margin: 0 4px;
                background: url("../assets/images/yuyueshf/number.png") no-repeat center;//背景图
                background-size: 100% 100%;
                .dataBoc {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    .tt {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        span{
                            width: 100%;
                            height: 100%;
                            line-height: 40px;
                            float: left;
                            text-align: center;
                            font-size: 26px;
                            color: #f64841;
                        }
                    }
                }
            }
        }
    }