<body>
<div
id
=
"app"
>
<input
type
=
"text"
v-model
=
"money"
>
<!-- 有时在页面上渲染的数据需要进行一定的加工，例如需要四舍五入，格式转换等，在vue中推荐的做法是使用过滤器 -->
<!-- 过滤器使用格式：{{数据|过滤器}} -->
<p>
{{money|rounding|seperate|currency}}
</p>
<!-- 区别 任何一个值换一种写法 -->
</div>
<script
src
=
"vue.js"
>
<
/script>
<script>
// vue中没有自带的过滤器，必须自己创建过滤器。
// 创建过滤器有两种方法：全局注册过滤器，局部过滤器。
// 全局注册的过滤器可以在项目中任何地方使用
// 在某个组件中局部注册的过滤器只能在这个组件的模板中使用。
// Vue.filter方法，用于全局注册一个过滤器，第一个参数是过滤器名字，第二个参数是过滤器函数。过滤函数接受需要过滤的值为参数，返回过滤之后的值。
// 全局注册过滤器必须在根组件之前。
Vue
.
filter
(
"currency"
,
function
(
v
,
c
) {
if
(
c
)
return
c
+
v
;
return
"￥"
+
v
;
});
new
Vue
({
el:
"#app"
,
data:
{
money:
0
,
},
methods:
{
},
// filter用于在本组件中注册过滤器，在某个组件中局部注册的过滤器，只能在这个组件的模板中使用，类型是一个对象，对象中键是一个过滤器名字，值是过滤函数。
filters:
{
rounding
(
v
) {
if
(
v
==
null
||
v
==
undefined
||
v
==
""
) {
return
null
;
}
return
v
.
toFixed
(
2
);
},
seperate
(
v
) {
let
str
=
"v"
;
let
count
=
0
;
for
(
let
i
=
str
.
length
-
4
;
i
>=
0
;
i
--
){
count
++
;
if
(
count
==
3
&&
i
!=
0
){
count
=
0
;
let
arr
=
str
.
split
(
""
);
arr
.
splice
(
i
,
0
,
","
);
str
=
arr
.
json
(
""
);
}
}
return
str
;
},
}
})
function
n
(
num
) {
var
str
=
""
+
num
;
var
arr
=
str
.
split
(
""
);
console
.
log
(
arr
)
for
(
var
i
=
arr
.
length
-
3
;
i
>
0
;
i
-=
3
) {
console
.
log
(
i
)
arr
.
splice
(
i
,
0
,
","
);
}
return
arr
.
join
(
""
);
}
// console.log(n(123456789))
<
/script>
</body>
