Vue自定义过滤器格式化数字三位加一逗号实现代码

前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。

作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Vue数字过滤器逢三一断</title>
 </head>
 <body>
  <div id="app">
   <h4>说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4>
   <input type="number" v-model="num" />
   <p>{{num|NumFormat}}</p>
  </div>
 </body>
 <script type="text/javascript" src="vue.js"></script>
 <script>
  Vue.filter('NumFormat', function(value) {
   if(!value) return '0.00';
   var intPart = Number(value).toFixed(0); //获取整数部分
   var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
   var floatPart = ".00"; //预定义小数部分
   var value2Array = value.split(".");
   //=2表示数据有小数位
   if(value2Array.length == 2) {
    floatPart = value2Array[1].toString(); //拿到小数部分
    if(floatPart.length == 1) { //补0,实际上用不着
     return intPartFormat + "." + floatPart + '0';
    } else {
     return intPartFormat + "." + floatPart;
    }
   } else {
    return intPartFormat + floatPart;
   }
  })
  var app = new Vue({
   el: "#app",
   data: {
    num: 0
   },
  })
 </script>
</html>

总结

以上所述是小编给大家介绍的Vue自定义过滤器格式化数字三位加一逗号实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue自定义过滤器创建和使用方法详解
  • Vue-Cli中自定义过滤器的实现代码
  • Vue过滤器的用法和自定义过滤器使用
  • 详解Vue自定义过滤器的实现
  • Vue.js每天必学之过滤器与自定义过滤器
赞 (0)

相关推荐

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • vue自定义过滤器创建和使用方法详解

    本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下 过滤器:生活中有很多例子,净水器 空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用 语法: <any

  • 详解Vue自定义过滤器的实现

    一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu

  • Vue过滤器的用法和自定义过滤器使用

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO

  • Vue-Cli中自定义过滤器的实现代码

    本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记 vue2里面移除了内置过滤器,所有过滤器都需要自己定义. 以下例子是使用webpack模版自定义一个日期格式过滤器的例子. 文件结构 . ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ... 所有过滤器都放在Filters文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来. Filters/D

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

  • vue使用过滤器格式化日期

    vue使用过滤器格式化日期

    本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下 案例要求 案例讲解 1.查看未过滤格式化的日期格式 2.设置模板函数format 接收日期值和日期格式 3.按照日期格式对日期进行拼接并返回值 4.将拼接好的日期显示在页面上 最终案例效果 代码 设置日期显示格式 <div id="app"> <div>{{date }}</div> <div>{{date | format('yyyy-MM-dd')}}

  • Android 自定义view实现进度条加载效果实例代码

    Android 自定义view实现进度条加载效果实例代码

    这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

  • vue自定义标签和单页面多路由的实现代码

    1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./ 然后导出组件: export default { components: { vHead, } };

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

  • vue自定义组件实现v-model双向绑定数据的实例代码

    项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

  • vue全局实现数字千位分隔符格式

    vue全局实现数字千位分隔符格式

    本文实例为大家分享了vue全局实现数字千位分隔符格式的具体代码,供大家参考,具体内容如下 这个是啥意思呢 ? 就是我们在页面上需要渲染数据的时候,比如 88888,我们需要按照千分位显示成方便阅读的格式88,888. 这个时候我的做法是vue写一个过滤器,将所有的数据都用这个过滤器过滤一下. 因为涉及的数据相对比较多,我就将这个过滤器挂载到了全局,这样就不用再每个页面引用了. 转换代码实现 首先创建一个文件 numberToCurrency.js ,实现数字千位分隔符转换功能. export f

  • vue自定义全局组件实现弹框案例

    vue自定义全局组件实现弹框案例

    本文实例为大家分享了vue自定义全局组件实现弹框案例的具体代码,供大家参考,具体内容如下 说明:本案例是封装的一个弹框页面,因为只想要一个遮罩,内容自定义.因为ElementUI上已经提供了一个弹框组件,但觉得elementUI的组件内容有点多,所有自己就封装了全局组件.自己封装的参考了elementUI组件的源码. 主要步骤如下 1.创建一个文件夹my-dialog2.在my-dialog文件夹下创建MyDialog.vue和index.js3.index.js需要引入MyDiloag并封装和

随机推荐