SOURCE

console 命令行工具 X clear

                    
>
console
var ss = new Vue({
  'el': '#demo',
  data: {
      myNum: '770126',
      numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      valList: [],
  },
    mounted () {
    this.valList = this.myNum.split('')
    setTimeout(() => {
      this.animationItemWidth = 50
    }, 1000)
    setInterval(() => {
      this.valList = []
      let len = Math.floor(Math.random() * (8 - 6 + 1)) + 6
      for (let i = 0; i < len; i++) {
        this.valList.push(Math.floor(Math.random() * (9 - 0 + 1)) + 0)
      }
    }, 2000)
  },
  methods: {
   
  }

});
<div class="about" id="demo">
      <div class="num-box" v-for="(val,valIndex) in valList" :key="valIndex+'val'">
        <div class="base-list" :style="{top: `-${val * animationItemWidth}px`}">
          <div class="num" v-for="(item,index) in numList" :key="index+'num'">
            <div class="style-box">{{item}}</div>
          </div>
        </div>
      </div>
    </div>
.about {
  display: flex;
  justify-content: center;
  background: rgb(148, 81, 81);
  height: 300px;
}

.num-box {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 20px;
  .base-list {
    position: absolute;
    transition: 0.6s all ease;
  }
  .num {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;

    .style-box {
      width: 40px;
      height: 40px;
      display: inline-block;
      font-size: 40px;
      font-weight: 600;
      line-height: 40px;
      vertical-align: middle;
      border: 3px solid #ccc;
    }
  }
}