软件开发定制vue全局过滤器(filter)和局部过滤器(filters)

软件开发定制过滤器作用：

软件开发定制在不改变原始数据的情况下 软件开发定制格式化展示数据

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

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

①插值表达式

<p> {{message |  formatId}} </p>

②v-bind属性绑定

<div :id="message |  formatId"> </div>

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

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

1、局部定义（filters）：

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

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

<div id="app">
    <p>message的值为：{{message | tian }}</p>
</div>
<script>
   const vm = new Vue({
        el:"#app",
        data:{
            message: "helloTian"
        },
        //过滤器本质上是函数
        filters:{
            //注意: 过滤器函数形参中的val，永远是"管道符"前面的那个值
            tian(val){
                //charAt方法接受索引值，表示从字符串中把下标对应的字符，获取出来
                let first = val.charAt(0).toUpperCase()
                //slice方法，可以截取字符串，从指定下标往后截取
                let other = val.slice(1)
                return first+ other
            }
        }
    }) 
 
// 最后的结果就展示HelloTian
</script>

2、全局定义（filter）

//Vue.filter()方法接收2个参数
//第一个参数是全局过滤器的"名字"
//第二个参数是全局过滤器的"处理函数"
 
Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
           		过滤器的功能
           		return 过滤的结果           
})
 
 
//同样上面的过滤第一个字母大写
<p>message的值为 {{message | capi }}</p>
 
 
//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
})

也可以定义局部的

<template>
 
    <text>发表时间：{{item.add_time | formatDate}}</text>
 
</template>
 
 
 
<script>
	export default {
		filters: {
			formatDate (date) {
				const nDate = new Date(date)
				const year = nDate.getFullYear()
				const month = nDate.getMonth().toString().padStart(2,0)
				const day = nDate.getDay().toString().padStart(2,0)
				return year+'-'+month+'-'+day
			}
		}
	}
</script>

注意：

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

<p> {{ message | tian( arg1,arg2 ) }} </p>

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

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

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

               //过滤器的代码逻辑

})

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

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