（十六）Vue之过滤器

Vue学习目录

上一篇：（十五）Vue之收集表单数据

下一篇：（十七）Vue之内置指令

先看一个需求：给一个时间戳，然后把时间戳格式化显示出来
时间戳数据：

	data:{
            time:1671085482235//时间戳
        }

格式化时间戳有很多种方法，我们这里使用第三方库dayjs
链接：https://pan.baidu.com/s/1FXmTtwCAYFDiXmynqNu0Sg
提取码：w7d9

计算属性实现

	<h2>显示格式化后的时间</h2>
    <!--计算属性实现-->
    <h2>现在是：{{fmtTime}}</h2>

computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },

效果：

methods实现

    <!--methods实现-->
    <h2>现在是：{{getFmtTime()}}</h2>

	methods:{
	            getFmtTime(){
	                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
	            }
	        },

效果：

过滤器实现

过滤器定义：过滤器可被用于一些常见的文本格式化。对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

• 1.注册过滤器
  • 局部注册过滤器new Vue{filters:{}}
  • 全局注册过滤器：Vue.filter(name,callback)
• 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

注意点：

• 1.过滤器也可以接收额外参数、多个过滤器也可以串联
• 2.并没有改变原本的数据, 是产生新的对应的数据

局部过滤器

在实例new Vue是传入一个配置参数filters:{}

不传参

    <!--过滤器实现（不传参）-->
    <h2>现在是：{{time | timeformater}}</h2>

	filters:{
	            timeformater(){
	                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
	            },
	        }

传参

过滤器也可以接收参数，默认第一个参数是需要过滤的属性，往后的参数才传给过滤器的参数。
如果多个地方使用到一个过滤器，有的传参，有的不传参，并且只使用一个属性进行接收，那么不传参的过滤器就废了
例如：

	<!--过滤器实现（不传参）-->
    <h2>现在是：{{time | timeformater}}</h2>
	<!--过滤器实现（传参）-->
    <h2>现在是：{{time | timeformater('YYYY_MM_DD')}}</h2>

        filters:{
            /*timeformater(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            },*/
            timeformater(val,str){
                return dayjs(val).format(str)
            },
        }

效果：我们发现不传参格式化失败

可以使用ES6语法的形参默认值，就是不传参的时候使用的是默认值，传参的时候使用传参的值

	filters:{
            /*timeformater(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            },*/
            timeformater(val,str='YYYY年MM月DD日 HH:mm:ss'){//这里使用了ES6的形参默认值
                return dayjs(val).format(str)
            },
        }

效果：正常显示

多个过滤器使用

多个过滤器可以串联实现
语法：{{ xxx | 过滤器名1 | 过滤器名2 | …}} 或 v-bind:属性 = “xxx | 过滤器名1 | 过滤器名2 | …”

    <!--多个过滤器实现-->
    <h2>现在是：{{time | timeformater('YYYY_MM_DD') | mySlice}}</h2>

        filters:{
            /*timeformater(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            },*/
            timeformater(val,str='YYYY年MM月DD日 HH:mm:ss'){//这里使用了ES6的形参默认值
                return dayjs(val).format(str)
            },
            mySlice(val){//取前4位
                return val.slice(0,4)
            }
        }

效果：

全局过滤器

在实例Vue外使用Vue.filter(name,callback)配置，优点是任何模板都能使用

• name：过滤器名
• callback：回调函数

注意：全局过滤器收到的第一个参数就不是要过滤的属性了，直接就是传给过滤器的值

把取前四位的过滤器设计成全局过滤器
新建一个模板

<div id="root2">
    <h2>{{msg | mySlice}}</h2>
    <h2 :x="msg | mySlice">张三</h2>
</div>

注册全局过滤器

    Vue.filter('mySlice',function (val) {
        return val.slice(0,4)
    })

    new Vue({
        el:'#root2',
        data:{
            msg:'hello,张三!'
        }
    })

效果：