过滤器可以用在两个地方,插值和v-bind表达式。有全局过滤器和局部过滤器。
当有两个名称相同的局部过滤和全局过滤的时候会先调用局部。
常用的两个场景,价格和时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>单价: {{money | moneyFormat()}}</p>
<p>总价: {{total | moneyFormat()}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// 1. 定义全局过滤器
Vue.filter('moneyFormat', (money)=>{
return '¥' + money + '.000';
});
new Vue({
el:'#app',
data: {
money:189898,
total: 1
},
methods:{
},
filters: {
// 2. 局部过滤器
moneyFormat(money){
return '$' + money + '.0';
}
}
});
</script>
</body>
</html>
网友评论