vue全局过滤器(filter)和局部过滤器(filters)

官方文档：  https://cn.vuejs.org/v2/guide/filters.html

过滤器作用：

在不改变原始数据的情况下 格式化展示数据

对数据在模板中的表现过滤，符合预期，比如：数据是0和1，想要表现成对错、成功失败、数据需要过滤器来格式化，vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器，vue3也已经被砍掉了哟！

过滤器可以用在两个地方：

①插值表达式

{{message |  formatId}}

②v-bind属性绑定

首先过滤器本质上是函数，所以过滤器中一定有返回值

通过,过滤器的第一个形参就可以获取到管道符前面代处理的那个值

1、局部定义（filters）：

语法：

new Vue({
    data:{},
    // 在data平级写filters
    filters:{
        
      过滤器名字:函数(要过滤的原数据,参数){
            过滤器的功能
            return 过滤的结果      
      }	
    }
})

案例：把第一个字母过滤为大写

    
message的值为：{{message | tian }}

2、全局定义（filter）

//Vue.filter()方法接收2个参数
//第一个参数是全局过滤器的"名字"
//第二个参数是全局过滤器的"处理函数"

Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
           		过滤器的功能
           		return 过滤的结果           
})


//同样上面的过滤第一个字母大写
message的值为 {{message | capi }}


//str接收的就是管道符前面准备处理的值

Vue.filter('capi',(str)=>{
    return str.chartAt(0).toUpperCase() + str.slice(1) + "~~~~"
})

3、使用：

|  管道符​​​​​​​

案例： 可以全局过滤一个日期 {{item.data | dateFormat}}

在main.js 里

Vue.filter('dateFormat', (originVal)=> {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})





// 也可以用第三方库 dayjs 可以直接去看文档

首先就是下载完了引入再定义全局过滤器

Vue.filter('dateFormat', (originVal)=> {
  //直接调用dayjs()得到的是当前时间哟
  //dayjs(给定的日期时间) 得到指定的日期时间
    const dtStr = dayjs(originVal).format('YYYY-MM-DD HH:mm:ss')
    return dtStr
})

也可以定义局部的

注意：

过滤器本质是JavaScript函数，因此可以接受参数，格式如下：

{{ message | tian( arg1,arg2 ) }}

过滤器处理函数的形参列表中：

第一个参数 永远是"管道符"前面待处理的值msg
从第二个参数开始：才是调用过滤器时传递过来的 arg1 和 arg2 参数

Vue.filter('tian' , (msg , arg1, arg2 ) => {

               //过滤器的代码逻辑

})

如果全局过滤器和私有过滤器重命了，则会就近原则调用过滤器

当然也可以调多个过滤器  xxx | xxx | xxx |