当前位置: 首页 > news >正文

VUE--保留小数(过滤器)

1.cutOutNum.js

export const cutOutNum = (num, decimals) => {if (isNaN(num) || (!num && num !== 0)) {return "-";}function toNonExponential(_num) {var m = Number(_num).toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);return Number(_num).toFixed(Math.max(0, (m[1] || "").length - m[2]));}// 为了兼容科学计数法的数字num = toNonExponential(num);// 获取小数点的位置 + 1(不存在小数点的indexOf值为-1)const pointIndex = String(num).indexOf(".") + 1;// 获取小数点后的个数(需要保证有小数位)const pointCount = pointIndex ? String(num).length - pointIndex : 0;// 补零函数function zeroFill(zeroNum, num) {for (let index = 0; index < zeroNum; index++) {num = `${num}0`;}return num;}// 源数据为"整数"或者小数点后面小于decimals位的作补零处理if (pointIndex === 0 || pointCount <= decimals) {let tempNumA = num;// 区分"整数"和"小数"的补零if (pointIndex === 0) {tempNumA = `${tempNumA}.`;tempNumA = zeroFill(decimals - pointCount, tempNumA);} else {tempNumA = zeroFill(decimals - pointCount, tempNumA);}return Number(tempNumA) === 0 ? 0 : tempNumA;}// 截取当前数据到小数点后decimals位const Int = String(num).split(".")[0];const Decimal = String(num).split(".")[1].substring(0, decimals);const tempNumB = `${Int}.${Decimal}`;// 需求:数据为0时,需要显示为0,而不是0.00...return tempNumB;
};

2.调用

<template><div>{{ total | numFilter }}</div>
</template><script>
import { cutOutNum } from "@/util/cutOutNum";
export default {data() {return {total: 2.3334,};},filters: {numFilter(value) {return cutOutNum(value, 3);},},methods: {},
};
</script><style>
</style>

相关文章:

  • 在Go语言中处理HTTP请求中的Cookie
  • Huggy Lingo: 利用机器学习改进 Hugging Face Hub 上的语言元数据
  • 第11章 GUI Page462~476 步骤二十三 步骤二十四 Undo/Redo ②“添加操作”支持“Undo/Redo”
  • Android开发中“真正”的仓库模式
  • vue项目报错RangeError: Maximum call stack size exceeded
  • RMAN-03002 RMAN-06059 ORA-19625
  • Ubuntun使用ISO镜像中的软件包作为本地镜像源
  • 2024年MySQL学习指南(四),探索MySQL数据库,掌握未来数据管理趋势
  • 云计算:OpenStack 分布式架构部署(单控制节点与单计算节点)
  • JMeter使用
  • 7nm项目之顶层规划——04 power routing and pushdown
  • 选择 省市区 组件数据 基于vue3 + elment-plus
  • mysql5.7安装-windows安装版本
  • WPF 如何知道当前有多少个 DispatcherTimer 在运行
  • 【.NET Core】记录(Record)详解
  • 08.Android之View事件问题
  • 2017前端实习生面试总结
  • Docker: 容器互访的三种方式
  • ES6核心特性
  • ES6系统学习----从Apollo Client看解构赋值
  • k8s如何管理Pod
  • React组件设计模式(一)
  • spring security oauth2 password授权模式
  • SQLServer之创建显式事务
  • TCP拥塞控制
  • TypeScript迭代器
  • Webpack入门之遇到的那些坑,系列示例Demo
  • Yii源码解读-服务定位器(Service Locator)
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 基于 Babel 的 npm 包最小化设置
  • 基于web的全景—— Pannellum小试
  • 开发基于以太坊智能合约的DApp
  • 前端性能优化——回流与重绘
  • 深入浅出webpack学习(1)--核心概念
  • 微信小程序开发问题汇总
  • 怎么把视频里的音乐提取出来
  • ​决定德拉瓦州地区版图的关键历史事件
  • # 数论-逆元
  • #pragam once 和 #ifndef 预编译头
  • $().each和$.each的区别
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (1)STL算法之遍历容器
  • (13)Hive调优——动态分区导致的小文件问题
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (全注解开发)学习Spring-MVC的第三天
  • (四)汇编语言——简单程序
  • (心得)获取一个数二进制序列中所有的偶数位和奇数位, 分别输出二进制序列。
  • (一一四)第九章编程练习
  • (原)Matlab的svmtrain和svmclassify
  • (转)C#调用WebService 基础
  • (转载)Linux 多线程条件变量同步
  • .net 托管代码与非托管代码