首页 > 其他分享 >vue 实现滚动数字效果,并且三位分割展示

vue 实现滚动数字效果,并且三位分割展示

时间:2022-10-21 20:45:54浏览次数:81  
标签:floatPart vue return intPartFormat value blog 三位 var 滚动

vue 中 animate-number 组件可实现效果

formatter(value){
                //return num.toFixed(2)
                if (!value) return '0'
                var intPart = Number(value).toFixed(0) // 获取整数部分
                var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
                return intPartFormat;

                // 如若有小数部分处理
                // var floatPart = '.00' // 预定义小数部分
                // var value2Array = value.toString().split('.')

                // // =2表示数据有小数位
                // if (value2Array.length === 2) {
                //     floatPart = value2Array[1].toString() // 拿到小数部分
                //     if (floatPart.length === 1) {
                //         //return intPartFormat + '.' + floatPart + '0'    
                //         return intPartFormat + '.' + floatPart  
                //     } else {
                //         return intPartFormat + '.' + floatPart
                //     }
                // } else {
                //     return intPartFormat
                // }
            },

标签:floatPart,vue,return,intPartFormat,value,blog,三位,var,滚动
From: https://www.cnblogs.com/pansidong/p/16814706.html

相关文章

  • vue 用 input 和 canvas 标签实现前端背景图片的移动 重绘 上传
    前言:    闲得无聊写的,嫌麻烦的直接出门左转搜索vuecropper.js模块直接用就行正文:  首先我们要知道input是自带file方法的,直接可以选这文件上传就行,但为了......
  • vue引用MarkDown(mavonEditor)编辑器,文档
    mavonEditorInstallmavon-editor(安装)npminstallmavon-editor--save如何引入:全局引用://全局注册importVuefrom'vue'importmavonEditorf......
  • vue题库
    1、用index作为key可能会引发的问题1、若对数据进行:逆序添加/逆序删除等破坏顺序的操作,会产生没有必要的真实DOM更新,界面效果虽然没有问题,但是数据过多的话,会效率过低;......
  • vue2.0中svg图片的引用
    1、基础工作都是引用了svg-sprite-loader这个插件  npmisvg-sprite-loader--save2、写一个Svglcon的组件(components/Svglcon),在components目录下新建一个SvgIcon文......
  • 为什么vue3要选用proxy,好处是什么?
    提问Object.defineProperty()和proxy的区别?为什么vue3要选用proxy,好处是什么?proxyProxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋......
  • vue官方文档解读
    参考:https://cn.vuejs.org/guide/introduction.htmlhttps://blog.csdn.net/weixin_42371679/article/details/112408800vue是一个js库,它基于标准html、css和js,并提供了......
  • vue-code-diff 实现版本对比,带内容覆盖(仅组件,待完善内容解析)
    <template><divclass="version-diff-content"><divclass="version-diff-top"><div><el-selectv-model="versionDiffSelected.selectOne.versi......
  • Chrome 浏览器安装Vue插件方法
    谷歌浏览器扩展程序 首先去github下载vue.zip文件插件 下载地址:https://github.com/vuejs/vue-devtools不要去下载默认分支的 下载后解压验证npm是否安装成......
  • 面试题vue组件的相关问题
    面试题vue组件的相关问题什么是组件什么是组件:组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。一个页面可以由多个组件构成,......
  • vue中执行异步函数async和await的用法
    一、async基础用法async函数,会返回一个promise对象,可以用.then调用async函数中return的结果asyncfunctionhelloAsync(){return"返回结果";}con......