SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
  el: '#app',
  computed: {
    t() {
      return (this.time / 100).toFixed(2)
    },
    t1() {
      return Math.floor(this.time / 1000)
    },
    t2() {
      return Math.floor(this.time % 1000 / 100)
    },
    t3() {
      return Math.floor(this.time % 100 / 10)
    },
    t4() {
      return Math.floor(this.time % 10)
    }
  },
  data: {
    time: 0,
    stop: false,
    step:Number(1.111),
    timespan: 1,
    on: false,
  },
  methods: {
    add() {
      if (this.time >= 9999) this.time = 0;
      this.time += this.step;
      if (this.stop) return;
      setTimeout(this.add, this.timespan);
    }
  },
  mounted() {
    this.add();
  }
})
<div id="app">
  <p>
    增长步长:
    <input type="number" v-model="step" style="width:50px" min="0.0" step="0.1"
    />
    执行间隔:
    <input type="number" v-model="timespan" style="width:50px" />
  </p>
  <p>
    <button @click="(stop=false,time=0,add())">
      开始
    </button>
    <button @click="stop=true"></button>
  </p>
  <p>
    {{t}}
  </p>
  <p>
    {{t1}}-{{t2}}-{{t3}}-{{t4}}
  </p>
  <div>
    <transition-group name="list" tag="span" class="list">
      <div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t1==i">
        {{i}}
      </div>
    </transition-group>
    &nbsp;
    <transition-group name="list" tag="span" class="list">
      <div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t2==i">
        {{i}}
      </div>
    </transition-group>
    &nbsp;
    <transition-group name="list" tag="span" class="list">
      <div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t3==i">
        {{i}}
      </div>
    </transition-group>
    &nbsp;
    <transition-group name="list" tag="span" class="list">
      <div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t4==i">
        {{i}}
      </div>
    </transition-group>
  </div>
</div>
.list {
  display: inline-block;
}

.list-item {
  position: absolute;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.1s;
}

.list-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

本项目引用的自定义外部资源