uni-app 金额格式化

news2024/11/25 2:52:29

普通过滤器(filter)在当前页面定义,复制红色代码即可

<template>
    <view>
        <text >{{balance|money}}</text>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                balance:1223434534.367,
            }
        },
        methods: {
            
        },
        filters:{
            money(value) {
                if (!value) return '0.00';
                var value = value.toFixed(2);//提前保留两位小数
                var intPart = Number(value).toFixed(0); // 获取整数部分
                var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断 ???
                var floatPart = '.00'; // 预定义小数部分
                value = value.toString();//将number类型转为字符串类型,方便操作
                var value2Array = value.split('.');
                if (value2Array.length === 2) { // =2表示数据有小数位
                  floatPart = value2Array[1].toString(); // 拿到小数部分
                  if (floatPart.length === 1) { // 补0,实际上用不着
                      return intPartFormat + '.' + floatPart + '0';
                  } else {
                      return intPartFormat + '.' + floatPart;
                  }
                } else {
                  return intPartFormat + floatPart;
                }
            }
        }

    }
</script>

<style>
</style>

 全局过滤器(filter)在main.js中定义,复制红色代码即可

import Vue from 'vue'
import App from './App'

Vue.filter('money', function (value) {
    if (!value) return '0.00';
    var value = value.toFixed(2);//提前保留两位小数
    var intPart = Number(value).toFixed(0); // 获取整数部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 将整数部分逢三一断 ???
    var floatPart = '.00'; // 预定义小数部分
    value = value.toString();//将number类型转为字符串类型,方便操作
    var value2Array = value.split('.');
    if (value2Array.length === 2) { // =2表示数据有小数位
      floatPart = value2Array[1].toString(); // 拿到小数部分
      if (floatPart.length === 1) { // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0';
      } else {
          return intPartFormat + '.' + floatPart;
      }
    } else {
      return intPartFormat + floatPart;
    }
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

使用方法,需要使用的页面

<template>
    <view>
        <text >{{balance|money}}</text>
    </view>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/587978.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

怎么让用户用好你的在线帮助文档协作工具?

在线帮助文档协作工具是现代企业中重要的工具&#xff0c;它可以帮助企业员工更好地协作&#xff0c;提高工作效率&#xff0c;减少沟通成本。然而&#xff0c;如何让用户用好在线帮助文档协作工具&#xff0c;满足其需求&#xff0c;本文将探讨以下几个方面&#xff1a; 一、…

LwIP 之七 详解 PBUF 结构、通信数据流、性能优化

数据包的复制在协议栈中是非常耗时的一个操作。LwIP 协议栈内部使用 pbuf 这种数据结构来对数据进行传递&#xff0c;灵活的 pbuf 结构体使得数据在不同网络层之间传递时可以减少内存的开销&#xff0c;避免频繁的内存复制&#xff0c;增加数据在不同层之间传递的速度。 简介 …

OJ练习第122题——交错字符串

交错字符串 力扣链接&#xff1a;97. 交错字符串 题目描述 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子字符串&#xff1a; s …

Idea+maven+springboot项目搭建系列--1 整合Rocketmq

前言&#xff1a;本文以mavenspringboot 整合Rocketmq 完成消息的发送和接收。 1 Rocketmq 介绍&#xff1a; 1.1 Rocketmq 特性&#xff1a; Apache RocketMQ是一款快速、可靠的分布式消息传递和流处理平台&#xff0c;具有可扩展性和高性能。它是一个分布式的、去中心化的消…

docker 快速搭建elk

Docker搭建ELK步骤详解 文章目录 一.安装前须知二.安装 Docker三.Docker 安装 ElasticSearch四.Docker 安装 ElasticSearch-head&#xff08;可选&#xff09;五.Docker 安装 Kibana六.Docker 安装 LogStash七.创建springboot应用七.后记 一.安装前须知 以下步骤在 VMware 中…

清晰、明了的@Transcation事务嵌套使用

文章目录 概述Transcation注解事务实现原理 Transcation使用1、事务生效的情况&#xff1a;1. 外层有事务&#xff0c;内层无事务结论&#xff1a;外层有事务&#xff0c;内层也会有事务 2. 外层事务&#xff08;requierd&#xff09;&#xff0c;内层事务&#xff08;not_supp…

HEVC环路后处理核心介绍

介绍 为什么需要环路后处理技术 hevc采用基于快的混合编码框架&#xff0c;方块效应、振铃效应、颜色偏差、图像模糊等失真效应依旧存在&#xff0c;为了降低此类失真影响&#xff0c;需要进行环路滤波技术&#xff1b; 采用的技术 去方块滤波DF&#xff0c;为了降低块效应…

ADC和DAC的工作原理及其区别

ADC和DAC的工作原理及其区别 ADC和DAC都是用于模拟信号与数字信号之间的转换器。 ADC&#xff0c;即模数转换器&#xff0c;是将连续的模拟信号转换为数字信号的电路。其输入为模拟信号&#xff0c;输出为数字信号。ADC的主要组成部分是模拟信号采样模块、模拟信号处理模块、模…

生态系统服务(InVEST模型)土壤保持、水源涵养、氮磷输出、生态保护、生物多样性、碳固

白老师&#xff08;研究员&#xff09;&#xff1a;长期从事生态系统结构-格局-过程-功能-服务的变化与响应关系等研究工作&#xff1b;重点围绕生物多样性、生态系统服务与价值等&#xff0c;构建生物地球化学模型和评价指标体系&#xff0c;为城市、区域和自然保护区的可持续…

sqlserver中动态sql语句应用

前言 一、使用exec 1.用拼接方法 二、使用sp_executesql 1.用拼接方法 2.传参的方法 总结 前言 例如&#xff1a;列表查询条件不固定&#xff0c;根据前端传过来的参数&#xff0c;这时需要根据查询条件后台动态生成SQL语句 一、使用exec exec适用于字符串拼接的方式&#xf…

mac安装python

接上集&#xff0c;我们已经安装了Homebrew 那么在 macOS 上安装 Python 有多种方法&#xff0c;以下是其中两种常用方法&#xff1a; 1&#xff1a;使用 Homebrew 安装 Python Homebrew 是 macOS 上的包管理器&#xff0c;可以方便地安装和管理各种软件包。如果您已经安装了…

美国E8267C是德(KEYSIGHT) E8267D 20G/44G矢量信号发生器

Agilent E8267C、Keysight E8267D、 PSG 矢量信号发生器&#xff0c;高达 44 GHz ​Keysight E8267D (Agilent) PSG 矢量信号发生器是业界首款 I/Q 调制高达 44 GHz 的集成微波矢量信号发生器。它具有先进的宽带内部基带发生器&#xff0c;能够灵活地播放任意波形或生成复杂的…

在Windows11上模拟运行Linux命令的几种方式

在 Windows 上运行 Linux 命令的软件有很多&#xff0c;以下是其中几个比较常用的&#xff1a; Cygwin Cygwin 是一个为 Windows 提供类 Unix 环境的开源软件&#xff0c;它包含了大量的 Unix 工具和命令&#xff0c;可以在 Windows 上运行 Linux 命令。 安装命令 winget i…

【Java 继承】了解Java类的继承的特点,继承的关系,继承的使用,到底什么是继承?

博主&#xff1a;_LJaXi Or 東方幻想郷 专栏&#xff1a; Java | 从入门到入坟 Java 继承 继承的特点 \ 介绍 ❓特点 ♊ 继承的使用方式 &#x1f51e;避免重复方法 子类访问父类的成员变量 &#x1f232;子类访问父类的成员变量&#xff08;直接访问&#xff09;访问父类与子类…

MapReduce实战案例(3)

案例三: MR实战之TOPN(自定义GroupingComparator) 项目准备 需求测试数据 有如下订单数据 订单id商品id成交金额Order_0000001Pdt_01222.8Order_0000001Pdt_0525.8Order_0000002Pdt_03522.8Order_0000002Pdt_04122.4Order_0000002Pdt_05722.4Order_0000003Pdt_01222.8 现在…

6 具有 OCR 功能的顶级 PDF 图像转 Word 转换器

如果您在 PDF 图像中找到一些有用的信息并想转换为 Word 格式以供进一步使用&#xff0c;您将需要一个具有OCR 功能的 PDF 图像转 Word 转换器&#xff0c;该转换器旨在识别 PDF 图像中的文本并将其制作出来可编辑。 将 PDF 图像转换为 Word 并不容易&#xff0c;因为我们需要…

高压放大器工作原理(高压放大器怎么用的)

高压放大器是一种能够将低电平信号放大到足够高的电平&#xff0c;以便用于驱动大功率负载或处理高电压信号的电子设备。它广泛应用于各种电子设备中&#xff0c;例如音频放大器、射频放大器、电力电子设备等。下面我们将详细介绍高压放大器的工作原理以及使用方法。 高压放大器…

一分钟:GTP鼓谱导出转换MIDI格式教程

const loadPromise self.osmd.load("/resource/test");loadPromise.then(function () {self.osmd.render();});作为一名鼓手&#xff0c;我深知鼓谱转换MIDI格式的重要性&#xff0c;但是找了好久&#xff0c;一直没有找到一个好用的工具。 直到我发现了GTP鼓谱转换…

下载YouTube视频的一种方法

文章目录 工具名称下载方法使用方法1.只下载音频2.下载音频转换成mp3&#xff08;加上-x –audio-format参数&#xff09;3.下载视频&#xff08;带音频&#xff09;ID&#xff1a;22 | EXT&#xff1a;mp4 | 1280*720 下载的数据集&#xff1a;YouCook2 工具名称 yt-dlp 下载…

doxygen使用: 跨平台方式让markdown文件包含另一个文件

文章目录 1. 目的和问题2. 解决思路2.1 FILTER_PATTERNS 选项2.2 基于 Python 的 FILTER_PATTERNS 选项2.3 sledcpp.py 脚本 3. 完整工程3.1 目录结构3.2 hello.h 文件内容3.3 CHANGELOG.md 文件内容3.4 generate_doxyfile.py 文件内容3.5 docs/root.md3.6 docs/changelog.md3.…