vue数字翻牌（两种方案直接渲染动画/根据值动态渲染）

请求数据直接渲染一次

<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>

<script>
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)
      })
    },
  },
}
</script>

<style scoped lang="scss">
.number {
  text-align: center;
  width: auto;
  padding: 0 20px;
  height: 95px;
  background: url('../../static/pages/numberBg.png'); // 外框背景
  background-repeat: no-repeat;
  background-size: 100% 100%;
  ul {
    display: inline-block;
    height: 100px;
    text-align: center;

    li {
      float: left;
      width: 40px;
      height: 100px;
      margin: 0 4px;
      background: url('../../static/pages/number.png') center center; // 翻牌背景
      background-repeat: no-repeat;
      background-size: 100% 60%;

      .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: 100px;
            float: left;
            text-align: center;
            font-size: 60px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

动态翻牌（根据传来的值更新数据）

<!--
 * @Author: your name
 * @Date: 2021-08-05 14:44:20
 * @LastEditTime: 2021-08-06 10:03:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \echarts\echarts\src\components\number.vue
-->
<template>
  <div class="chartNum">
    <div class="box-item">
      <li
        :class="{ 'number-item': !isNaN(item), 'mark-item': !isNaN(item) }"
        v-for="(item, index) in orderNum"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numberItem">0123456789</i>
        </span>
        <span class="comma" v-else>{{ item }}</span>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hChartNum',
  props: {
    num: {
      type: Number,
      default: 1123,
    },
  },
  data() {
    return {
      orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
    }
  },
  watch: {
    num(newVal, oldVal) {
      // this.scroll()
      console.log(newVal)
      this.toOrderNum(newVal)
    },
  },
  mounted() {
    setTimeout(() => {
      this.toOrderNum(this.num) // 这里输入数字即可调用
    }, 500)
  },
  methods: {
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter((item) => !isNaN(item))
      // 结合css，让文字滚动起来
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },

    // 处理订单数字
    toOrderNum(num) {
      num = num.toString()
      if (num.length < 8) {
        num = '0' + num // 未满8位，补零
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length == 8) {
        this.orderNum = num.split('')
      } else {
        // 数据量超过8位
        this.$message.error('数据量过大')
      }
      this.setNumberTransform()
    },
  },
}
</script>

<style scoped lang="scss">
.box-item {
  position: absolute;
  top: 5%;
  left: 3%;
  padding: 20px 20px 0 20px;
  font-size: 60px;
  line-height: 100px;
  height: 95px;
  text-align: center;
  list-style: none;
  color: #fff;
  writing-mode: vertical-lr;
  text-orientation: upright;
  background: url('../../static/pages/numberBg.png'); // 外框背景
  background-repeat: no-repeat;
  background-size: 100% 100%;

  -moz-user-select: none;
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

/*默认逗号设置*/
.number-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
  & > span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/*滚动数字设置*/
.number-item {
  width: 41px;
  height: 75px;
  background: url(../../static/pages/number.png) no-repeat center center;
  background-size: 100% 100%;
  list-style: none;
  margin-right: 5px;
  & > span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    & > i {
      font-style: normal;
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
    }
  }
}
.number-item:last-child {
  margin-right: 0;
}
</style>