1.全局自定义
格式化金额为例
<span>{{money | moneyAdd(money,2)}}</span>
Vue.filter('moneyAdd',function(money,decimal){//main.js
decimal = decimal > 0 && decimal <= 20 ? decimal : 2;
money = parseFloat((money + '').replace(/[^\d\.-]/g,'')).toFixed(decimal)+'';
let d= money.split('.')[0].split('').reverse();
let y=money .split('.')[1];
let q='';
for(let i = 0 ; i < d.length ; i++){
q += d[i] + ((i + 1) % 3 == 0 && (i + 1) != d.length ? ',' : '')
}
return q.split('').reverse().join('') + "." + y
}
})
注释:过滤器可传参数如下
Vue.filter()
参数1:过滤器名称
参数2:过滤器实现的方法 该方法中有2个参数 参数1为需要过滤的数据,参数2为过滤器传递的参数
Vue.filter('toFixed', function (price, limit) {
return price.toFixed(limit)
})
Vue.filter('toUSD', function (price){
return `$${price}`
})
let app = new Vue({
el: '#app',
data () {
return {
price: 435.333
}
}
})
<div id="app">
<h1>
{{ price | toFixed(2) | toUSD }}
</h1>
</div>
2.局部定义
filters:{
//注意局部过滤器是有s的,区别于全局过滤器
}