在Vue项目中定义全局过滤器filter与在单一组件中定义过滤器

定义全局过滤器filter

第一种方法：
mian.js 中进行定义

Vue.filter("moneyFilter", function(value, num, type) {
  //value是使用过滤器是的表达式或者值,num和tyep中的参数
  return "￥" + value.toFixed(num) + type;
});

过滤器的参数解析

moneyFilter表示的是过滤器的名称
函数中的参数解析：
value是通过管道传来的数据
num在调用过滤器时在圆括号中第一个参数
type在调用过滤器时在圆括号中第二个参数

第二种方法：

1.创建方法

首先src下新建plugin文件夹，用来存放插件。

在plugin文件夹内新建filters.js，编写方法（如隐藏手机号码等等…）

/**
 * 隐藏手机号码
 * @param val {Number, String} 转换的字符串对象
 * @param retain {Number} 保留位数
 * @return {String}
 */
export privatePhone = function(val,retain = 4){
    if(!NUMBER(val) || String(val).length !== 11 || retain==0 ) return val;
    let phone = String(val)
    let digit = 11 - 3 - retain
    let reg = new RegExp(`^(\\d{3})\\d{${digit}}(\\d{${retain}})$`)
    return mobile.replace(reg,`$1${'*'.repeat(digit)}$2`)
}

2.添加到Vue全局中

在main.js中引入,添加

import * as filters from './plugins/filters.js'
Object.keys(filters).forEach(key=>{
    Vue.filter(key,filters[key])//插入过滤器名和对应方法
})

3.使用

使用方法有两种

a.在双花括号插值（用的较多）

{{ phone | privatePhone }}

b.在v-bind表达式中使用

<div v-bind:data=" phone | privatephone "></div>

在单一组件中定义过滤器

1、文件组件 中(局部 )过滤器的定义
Vue 文件组件中定义

//文件组件内的自定义过滤器
  filters: {
    moneyFilter: function(value, num, type) {
     return "￥" + value.toFixed(num) + type;
    },
    capitalize: function (value) {
    return 'id'+value+'test';
  }
  }

总结
Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。