Vue自定义过滤器格式化数字三位加一逗号
<template>
<div class="index-compont">
<div class="totalCount">{{num | NumFormat}}<span>元</span></div>
</div>
</template>
<script>
data(){
return {
num: 876543.00
}
},
filters: {
NumFormat: function (value) {
if(!value) return '0.00'
value = value.toFixed(2)
var intPart = Math.trunc(value)// 获取整数部分
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
}
}
}
</script>
Vue自定义过滤器格式化数字三位加一逗号的更多相关文章
- vue 自定义过滤器 格式化金额(保留两位小数)
1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val = val.toString().replace(/\$|\, ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue 自定义过滤器
vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}} <!-- 在 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- Vue自定义指令实现下拉加载:v-loadmore
和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) { var p = 0; var t = 0; ...
- vue自定义过滤器的创建与使用
原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...
- 【转载】Vue自定义指令实现pc端加载更多
转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...
- C# int转string 每三位加一个逗号
; Console.WriteLine(aaaa.ToString("N0")); Console.WriteLine()); Console.WriteLine("架构 ...
- js数字每3位加一个逗号
if(typeof val ==="number"){ var str = val.toString(); ? /(\d)(?=(\d{})+\.)/g : /(\d)(?=(?: ...
随机推荐
- nginx内存池
一.设计原则 (1)降低内存碎片 (2)降低向操作系统申请内存的次数 (3)减少各个模块的开发效率 二.源代码结构 struct ngx_pool_s { ngx_pool_data_t ...
- MVC在View中页面跳转
在做人事系统的时候须要用到页面跳转,那么页面跳转究竟用什么方法好呢?依照曾经的思路,我就会这么写. <span style="font-size:18px;">wind ...
- 基于编程人员Python学习第一章节
基于廖雪峰的python零基础学习后,自我总结.适用于有一定基础的编程人员,对我而言,则是基于.net已有方面,通过学习,记录自我觉得有用的地方,便于后续回顾. 主要以快速定位内容,通过直观代码输入输 ...
- 【Mongodb教程 第六课 】MongoDB 插入文档
insert() 方法 要插入数据到 MongoDB 集合,需要使用 MongoDB 的 insert() 或 save() 方法. 语法 insert() 命令的基本语法如下: >db.CO ...
- Android 使用 DownloadManager 管理系统下载任务的方法
在红黑联盟上看到的.这几天一直考虑做一个Notification 的带下载功能的自己定义通知.但没搞出来.无意中在论坛看到这个.先Mark,明天试试. 从Android 2.3(API level 9 ...
- STL vector的介绍(1)
尝试下翻译STL里面的一些easy和算法.四级过了.六级刚考.顺便练练自己的英语水平.翻译的不好的地方请大神多多不吝赐教哈.方便我改正. 原来均来自:http://www.cplusplus.com/ ...
- 2016/05/16 UEditor 文本编辑器 使用教程与使用方法
第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://uedito ...
- Struts2逻辑视图与视图资源
- ABAP 检查全角半角
check全角or半角的方法 第一种方法SJIS_DBC_TO_SBC 全角转半角 SJIS_SBC_TO_DBC 半角转换为全角 设定 import all =xtext = 文本全角-〉半角,返回 ...
- POJ1417 True Liars —— 并查集 + DP
题目链接:http://poj.org/problem?id=1417 True Liars Time Limit: 1000MS Memory Limit: 10000K Total Submi ...