vue全局/局部自定义过滤器及其使用

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的，区别于全局过滤器
}

最后

以上就是粗暴方盒为你收集整理的vue全局/局部自定义过滤器及其使用的全部内容，希望文章能够帮你解决vue全局/局部自定义过滤器及其使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。