保姆级使用Vue-count-to

最新推荐文章于 2024-04-17 11:24:35 发布

码路老默007

最新推荐文章于 2024-04-17 11:24:35 发布

阅读量380

点赞数

分类专栏：工作 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2201_75705263/article/details/134385832

版权

vue 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

工作

34 篇文章 0 订阅

订阅专栏

安装

npm install vue-count-to

直接使用

<template>
  <div class="vue-count-to">
    <div class="count-to">
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
      <div>
        <CountTo :startVal='startVal' :endVal='endVal' :duration='duration' />
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
  data() {
    return {
      startVal: 0,
      endVal: 100,
      duration: 3000,
      timer: null
    }
  },
  components: {
    CountTo
  },
  mounted() {
    this.timer = setInterval(() => {
      this.endVal = this.endVal * 2
    }, 4000)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>
<style scoped>
.vue-count-to {
  width: 100%;
  height: 100%;
}
.count-to {
  width: 300px;
  height: 300px;
  margin: 100px 0 0 100px;
  border: 1px solid red;
}
.count-to span {
  font-size: 30px;
  font-weight: 700;
  font-family: 'YJSZ';
}
.count-to > div:nth-of-type(1) > span {
  color: red;
}
.count-to > div:nth-of-type(2) > span {
  color: blue;
}
.count-to > div:nth-of-type(3) > span {
  color: pink;
}
.count-to > div:nth-of-type(4) > span {
  color: yellow;
}
.count-to > div:nth-of-type(5) > span {
  color: green;
}
.count-to > div:nth-of-type(6) > span {
  color: orange;
}
.count-to > div:nth-of-type(7) > span {
  color: cyan;
}
.count-to > div:nth-of-type(8) > span {
  color: purple;
}
</style>

① vue-count-to只能适用 Vue2，并不适用于Vue3；

② 对于Vue3还有个vue3-count-to，但是这个好像用不了，我当时试了，并没有加载出来，而且也没报错，还有待研究