vue金额格式化保留两位小数的实现

目录
  • 金额格式化保留两位小数
  • 自定义过滤器 格式化金额(保留两位小数)

金额格式化保留两位小数

Vue.filter("number", function(data) {
    return data.toFixed(2)
})

在需要的地方

{{integralval/100 | number}} 元

自定义过滤器 格式化金额(保留两位小数)

1、js部分

import Vue from 'vue'

Vue.filter('money', function(val) {
    val = val.toString().replace(/\$|\,/g,'');
    if(isNaN(val)) {
      val = "0";
    }
    let sign = (val == (val = Math.abs(val)));
    val = Math.floor(val*100+0.50000000001);
    let cents = val%100;
    val = Math.floor(val/100).toString();
    if(cents<10) {
       cents = "0" + cents
    }
    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
    }

    return (((sign)?'':'-') + val + '.' + cents);
})

2、html 部分

<template>
 <div id="box">
    <p style="text-align:center;">总金额: {{ this.money | money}}</p>
 </div>

</template>
<script>
import './filter/filter.js'
export default {
  data () {
    return {
      money: 1000000.89
    }
  },
}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-ui表格列金额显示两位小数的方法

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 定义过滤器 filters: { rounding (value) { return value.toFixed(2) } } toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,使用语法如下: NumberObject.t

  • vue 保留两位小数 不能直接用toFixed(2) 的解决

    用vue做项目的时候多多少少都会遇到这个问题 刚开始我是用toFixed()这个方法来写的 效果是有的 但是控制台一直是红红的围绕着我 突然想到 vue和jquery混搭 的 问题 于是乎 看了一下vue的开发文档 发现过滤器这个东东 并且可以自定义过滤器 js代码 html代码 虽然方法是这样的 但是在写的过程中还有页面上有效果 但是控制台一直红红的 于是我又仔细的看了一下文档 发现我没有把value转为Number类型 我上面放的直接是写好的代码 放心使用 ! 我写的是局部的过滤器 你如果很

  • Vue toFixed保留两位小数的3种方式

    第一种: 直接写在js里面,这是最简单的 val.toFixed(2) 第二种: 在ElementUi表格中使用 第三种: 在取值符号中使用 {{}} 定义一个方法 towNumber(val) { return val.toFixed(2) } 使用 {{ towNumber(row.equiValue) }} 补充知识:vue中提示toFixed不是函数 vue中toFixed获取小数点后两位 错误提示: .toFixed is not a function 解决办法: Number(_th

  • vue金额格式化保留两位小数的实现

    目录 金额格式化保留两位小数 自定义过滤器 格式化金额(保留两位小数) 金额格式化保留两位小数 Vue.filter("number", function(data) {     return data.toFixed(2) }) 在需要的地方 {{integralval/100 | number}} 元 自定义过滤器 格式化金额(保留两位小数) 1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val =

  • 利用正则表达式校验金额最多保留两位小数实例代码

    目录 正则表达式校验金额最多保留两位小数,那么必须满足如下条件: 部分正则表达式符号说明: 第一步,小数点之前表达式 第二步,小数点及小数位置 总结 先给出表达式结果:^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$ 有同学留言0识别错误,可用这个:(([1-9]{1}\d*)(.\d{1,2})?)|(0{1}.\d{1,2})思路:1.小数点前非0,则小数位置可有可无: 2.小数点前为0,那么小数位置必有修改于 2022-08-03 不熟悉正则表达式的同学,咋一看,一

  • Flex中对表格中某列的值进行数字格式化保留两位小数

    Flex中对表格中某列的值进行数字格式化保留两位小数

    1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="libr

  • js保留两位小数方法总结

    本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一.我们首先从经典的"四舍五入"算法讲起 1.四舍五入的情况 var num =2.446242342; num = num.toFixed(2); // 输出结果为 2.45 2.不四舍五入 第一种,先把小数边整数: Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77 第二种,当作字符串,使用正则匹配: Num

  • javaScript强制保留两位小数的输入数校验和小数保留问题

    输入input 的格式校验: $(function(){ var data = $.trim($("#inputId").val()); //此正则表达式验证小数位是否超过两位,小数可为1位 || 2位 || 整数 if(!(/^\d+(\.\d{1,2})?$/.test(data ) || /^\d$/.test(data ) )){ alert("输入金额格式不对!最高精确到分"); return ; } //写入对应位置 $(".htmlTextC

  • 使用BigDecimal除法后保留两位小数

    使用BigDecimal除法后保留两位小数

    目录 BigDecimal除法后保留两位小数 详细描述 BigDecimal除法异常Non-terminating decimal expansion 异常分析 解决措施 思考 总结 BigDecimal除法后保留两位小数 BigDecimal numBigDecimal=new BigDecimal(5.33); numBigDecimal=ConvertNumber(numBigDecimal,3,2);//调用,5.33/3后保留两位小数1.7766666=1.78 //BigDecima

  • java使double保留两位小数的多方法 java保留两位小数

    复制代码 代码如下: mport java.text.DecimalFormat; DecimalFormat    df   = new DecimalFormat("######0.00"); double d1 = 3.23456  double d2 = 0.0;double d3 = 2.0;df.format(d1); df.format(d2); df.format(d3); 3个结果分别为: 复制代码 代码如下: 3.230.00 2.00 java保留两位小数问题:

  • java、freemarker保留两位小数

     一.Java保留2位小数 double acc = 22.4322; String accX = String.format("%.2f", acc); 二.freemarker保留两位小数 <#if centerFreeSize??> ${centerFreeSize?string("#.##")} <#else> 0.00 </#if> 补充:freemarker保留小数 freemarker保留两位小数 方法一 #{num

随机推荐