Javascript 使用VUE和SCSS的数字滚动动画(&；内容生成)

new Vue({
  el: ".app",
  data: {
    number: 0
  },
  methods: {
    setNumber(e) {
      this.number = e.target.value;
    }
  },
  computed: {
    numberString() {
      return String(this.number).padStart(this.total, "0");
    }
  },
  created() {
    this.total = 9;
  }
});

* {
  margin: 0;
  padding: 0;
}

$height: 80px;

html {
  height: 100%;
}

body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, arial;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app {
  margin: auto;
}

.wrap {
  display: flex;
  margin: 0 0 20px;
  color: #fff;
  text-align: center;
  font-size: 40px;
}

.item {
  flex: 0 0 auto;
  margin: 0 10px 0 0;
  box-shadow: 0 0 6px #0b415b;
  position: relative;
  padding: 4px;
  border-radius: 4px;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to bottom,
      #239cc8 49.9%,
      #1b6386 50%,
      #1b6386 100%
    );
  }

  &:last-child {
    margin: 0;
  }

  &__inner {
    position: relative;
    background: linear-gradient(
      to bottom,
      #3fb9d9 49.9%,
      #3596ae 50%,
      #3596ae 100%
    );
    width: 50px;
    overflow: hidden;
  }

  &__digit {
    transition: 0.3s transform;
    line-height: $height;
    height: $height;

    &-list {
      &:before {
        display: block;
        $content: "";
        @for $i from 0 through 9 {
          $content: #{$content}#{$i}#{"\A"}#{" "};
        }
        content: "#{$content}";
      }
    }
  }
}

.range {
  width: 100%;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div class="app">
  <div class="wrap">
    <div class="item" v-for="i in total" :key="i">
      <div class="item__inner">
        <div class="item__digit" :style="{
              transform: `translateY(${Number(numberString.charAt(i - 1)) * -100}%)`
            }">
          <div class="item__digit-list"></div>
        </div>
      </div>
    </div>
  </div>
  <input type="range" min="0" value="0" :max="10 ** total - 1" @input="setNumber" class="range" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>