<!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>