vue实现数字加逗号分隔

 更新时间:2024年10月16日 09:16:12   作者:Juliet_xmj  
在Vue项目中,对数字进行格式化,实现带小数的数字三位一分隔的效果,可以通过自定义过滤器来实现,使用JavaScript的toLocaleString方法可以方便地将数字转换成带逗号的格式

vue数字加逗号分隔

带小数的数字三位一分隔

filters: {
   num: (val, fix = 2) => {
     if (val !== 0) {
	    val = Number(val) // 字符串转为数字,目标数据为数字可不转
	    val = '' + val.toFixed(2) // 保留两位小数并转为字符串
	    let int = val.slice(0, fix * -1 - 1) // 获取整数
	    let ext = val.slice(fix * -1 - 1) // 获取到小数
	    int = int.split('').reverse().join('') // 翻转整数
	    let temp = '' // 临时变量
	    for (let i = 0; i < int.length; i++) {
	      temp += int[i]
	      if ((i + 1) % 3 === 0 && i !== int.length - 1) {
	        temp += ',' // 每隔3个数字拼接一个逗号
	      }
	    }
	    temp = temp.split('').reverse().join('') // 加完逗号之后翻转
	    temp = temp + ext // 整数小数拼接
	    return temp // 返回
	  } else {
	    return val
	  }
   }
 }

整数三位一分隔

filters: {
   num: (val) => {
     val = '' + val // 转换成字符串
     let int = val
     int = int.split('').reverse().join('') // 翻转整数
     let temp = '' // 临时变量
     for (let i = 0; i < int.length; i++) {
       temp += int[i]
       if ((i + 1) % 3 === 0 && i !== int.length - 1) {
         temp += ',' // 每隔三个数字拼接一个逗号
       }
     }
     temp = temp.split('').reverse().join('') // 加完逗号之后翻转
     return temp // 返回
   }
 }

使用

{{name | num}}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中接收二进制文件流实现pdf预览的方法

    Vue中接收二进制文件流实现pdf预览的方法

    本文主要介绍了Vue中接收二进制文件流实现pdf预览的方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue3+vite配置多页面的示例代码

    vue3+vite配置多页面的示例代码

    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度,这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下
    2023-06-06
  • 详解vue移动端项目代码拆分记录

    详解vue移动端项目代码拆分记录

    这篇文章主要介绍了详解vue移动端项目代码拆分记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue 关于$emit与props的使用示例代码

    Vue 关于$emit与props的使用示例代码

    父组件使用 props 把数据传给子组件,子组件使用 $emit 触发父组件的自定义事件,今天通过示例给大家详细介绍下Vue 关于$emit与props的使用,感兴趣的朋友一起看看吧
    2022-03-03
  • vue3+ts+vite2项目实战踩坑记录

    vue3+ts+vite2项目实战踩坑记录

    最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue中组件的传值方式详解

    Vue中组件的传值方式详解

    这篇文章主要介绍了Vue中组件的传值方式详解,Vue中最常见的组件之间的通信方式有12种,今天我们会详细讲解父传子props方式和子传父emit以及非父子组件传值,需要的朋友可以参考下
    2023-08-08
  • 详解.vue文件解析的实现

    详解.vue文件解析的实现

    这篇文章主要介绍了详解.vue文件解析的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 深入Vue-Router路由嵌套理解

    深入Vue-Router路由嵌套理解

    这篇文章主要介绍了深入Vue-Router路由嵌套理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    这篇文章主要介绍了vue中echarts的用法及与elementui-select的协同绑定操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)

    vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)

    在Vue3中,利用Element Plus UI库封装表格组件,实现编辑、删除和查看详情的功能,通过定义tableData和tableDataHeader来管理表格数据和表头,其中tableData通常从后端获取,而tableHeader可根据具体需求自定义,感兴趣的朋友跟随小编一起看看吧
    2024-09-09

最新评论