vue 实现数字滚动增加效果

news/2024/7/10 0:49:40 标签: vue, 数字增加, vue-countTo

参考:http://panjiachen.github.io/countTo/demo/

效果:

使用vue-countTo插件

安装:npm install vue-count-to

使用:

<template>

<countTo ref='example' :startVal='startVal' :endVal='endVal' :duration='2000'></countTo>

<div v-on:click="start()">点击开始</div>

</template>

<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        // 初始值
        startVal: 0,
        // 最终值
        endVal: 100
      }
    },

  methods: {

start() {

      this.$refs.example.start();

    },

},

  }


http://www.niftyadmin.cn/n/797835.html

相关文章

CSS选择器汇总

一、overflow元素overflow : hidden,scroll,auto隐藏或显示滚动条overflow-yoverflow-x二、设置表格间间隔border-collapse: separate;border-spacing: 100px 50px;三、合并单元格border-collapse:collapse;四、border属性border : 1px solid black;border-styleborder-width;b…

vue监听滚动事件 实现元素吸顶

添加滚动监听事件&#xff1a; mounted () { window.addEventListener(scroll, this.handleScroll) }, 页面销毁需要取消监听&#xff1a; destroyed(){ window.removeEventListener(scroll, this.handleScroll) } 使用&#xff1a; <template> <div class&quo…

CSS样式实现左右直线中间文字

/*子导航样式*/ div.subnav-banner { height: 60px; line-height: 60px; text-align: center; width:1180px; margin: 20px auto;} .subnav-banner .line { display: inline-block; width: 44%; border-top: 1px solid #ccc ; } .subnav-banner…

vue跨页面定位到锚点位置

效果&#xff1a; header页面&#xff1a; <a :href"#/about?maodiangsjj">公司介绍</a> <a :href"#/about?maodianfzlc">发展历程</a> <a :href"#/about?maodianryzz">荣誉资质</a> <a :href&quo…

vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位&#xff0c;锚点的页面是在mounted里调用的定位到锚点位置&#xff0c;只有新打开此页面时才会执行mounted&#xff0c;所以当前页面内进行点击定位到锚点位置不起作用&#xff0c;解决方法在main.js里的watch里一直监听着URL是否发生变化&#x…

IO包之Bits类

Bits类是default类型的并非public类型&#xff0c;所以Bits类仅仅只能被IO包下的类所引用构造方法无参数 所有方法都为静态方法&#xff0c;所以可以直接通过类名去访问其下的所有方法其文件开头写到&#xff1a;/** * Utility methods for packing/unpacking primitive values…

元素使用display: inline-block;后会有间隙的问题

元素使用display: inline-block;后&#xff0c;总是和其他元素出现间隙&#xff0c;其实是fontsize惹的祸&#xff0c;将父元素的font-size:0px,就可以解决或者父元素设置display: table;

clipboard复制功能,实现静态复制和动态复制

引入jQuery和clipboard文件 <script src"http://code.jquery.com/jquery-3.4.1.min.js"></script> <script src"https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> 静态复制 <but…