首页 > 其他分享 >vue 基于 CountUp.js,可用于创建显示数字数据的动画。

vue 基于 CountUp.js,可用于创建显示数字数据的动画。

时间:2023-07-04 16:37:35浏览次数:39  
标签:vue js v2 countup CountUp true

地址:https://github.com/xlsdg/vue-countup-v2

Installation

$ npm install --save countup.js vue-countup-v2

Usage

<template>
  <div class="iCountUp">
    <ICountUp
      :delay="delay"
      :endVal="endVal"
      :options="options"
      @ready="onReady"
    />
  </div>
</template>

<script type="text/babel">
  import ICountUp from 'vue-countup-v2';
  export default {
    name: 'demo',
    components: {
      ICountUp
    },
    data() {
      return {
        delay: 1000,
        endVal: 120500,
        options: {
          useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        }
      };
    },
    methods: {
      onReady: function(instance, CountUp) {
        const that = this;
        instance.update(that.endVal + 100);
      }
    }
  };
</script>

<style scoped>
  .iCountUp {
    font-size: 12em;
    margin: 0;
    color: #4d63bc;
  }
</style>

 

标签:vue,js,v2,countup,CountUp,true
From: https://www.cnblogs.com/Jishuyang/p/17526071.html

相关文章

  • vue-cropper cdn vue3 打包后提示找不到
    vue-croppercdnvue3打包后bug vue3项目tscdn引入  vue-cropper官网推荐引入方式   dev环境报错运行不了后面发现打包后找不到  VueCropper,原来是名称问题, 修改如下:main.ts直接引入 再添加脚本到html文件window.VueCropper=window['vue-cropper'......
  • js简单小练习
    1计算二个数字的和并输出结果functionadd(a,b){console.log(a+b)}add(2,3)2判断一个数字是否为偶数,并在控制台打印相应结果functionisEven(a){if(a%2==0)returnconsole.log('even')console.log('odd')}isEven(2)3找出一个数组中的最大值并打印出来constarray=[1......
  • vue3+tiff.js展示tif文件
    vue3+tiff.js展示tif文件场景:tif格式的文件需要在页面上预览(预览的tif文件较小)组件:tiff.jsnpminstalltiff.js组件引入:import'tiff.js';注意:网络上的信息引入使用importTifffrom'tiff.js'  但是实际测试这样会报错: 看源码发现只需要直接import即可获......
  • js 密码 大写字母,小写字母,数字,特殊字符,包含2种以上
    constvalidatepassword=(rule,value,callback)=>{if(value==""||value==null){returncallback(newError('请输入8位以上字符,包含大写字母、小写字母、数字、特殊字符的2种以上情况'));}if(value.length<8){......
  • Vue-CoreVideoPlayer使用
    介绍Vue-CoreVideoPlayer一款基于vue.js的轻量级的视频播放器插件。采用AdobdXD进行UI设计,支持移动端适配,不仅功能强大,颜值也是超一流!Vue-CoreVideoPlayer的说明文档和sample都很完善,上手十分容易。该组件也保持了和原生HTMLVideo属性配置的对接,可定制性很高。播放器......
  • JS添加文字水印
    'usestrict'constwatermark={}/***@param{要设置的水印的内容}str@param{需要设置水印的容器}container*/constsetWatermark=(str,container)=>{constid='1.23452384164.123412415'if(container===undefined){return}//查看页面上有没有,如果......
  • js代码加密,保护js文件刻不容缓
    随着互联网的高速发展,网站运行的javaSCRIPT代码常常被别人轻易的拷贝,因此程序员不得不对想办法保护自的代码---javascript加密。现在网络上面有太多的拿来主义,当然这也是没有办法避免的一种现象,网络的开放性使得一切都没有什么秘密可言,所以代码加密便顺应而产生。js代码加密,保护......
  • 直播源码开发,js 数据的创建时间是否大于30天或相隔天数
    直播源码开发,js数据的创建时间是否大于30天或相隔天数//获取当前时间varday=newDate();//数据库的数据创建时间vartime=creationTime;//把当前时间数据库时间转换成毫秒数varstarDate=Date.parse(time);varendDate=Date.parse(day);//当前时间毫秒数减去创建时间......
  • vscode打开settings.json方法
    cmd+shift+p,输入settingOpenWorkspaceSettings也会打开UI设置界面;OpenUserSettings(JSON)会打开用户设置settings.json文件;OpenWorkspaceSettings(JSON)会打开工作区设置settings.json文件vscode存在两种设置settings.json的方式UserSettings用户设置:......
  • JS逆向实战20——某头条jsvm逆向
    声明本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!网站目标网站:aHR0cHM6Ly93d3cudG91dGlhby5jb20v数据接口:aHR0cHM6Ly93d3cudG91dGlhby5jb20vYXBpL3BjL2xp......