7. Vue中过滤器的使用

本案例使用的第三方日期库: dayjs

7.1 局部过滤器

HTML

<div id="root">
    <h1>显示当前时间</h1>
    <h2>当前时间戳: {{time}}</h2>
    <!--计算属性实现-->
    <h2>计算属性实现: {{fmtTime}}</h2>
    <!--方法实现-->
    <h2>方法实现: {{getTime()}}</h2>
    <!--过滤器实现-->
    <h2>过滤器实现: {{time|filTime}}</h2>
    <!--过滤器传参(默认第一个参数为time,第二个参数为'YYYY-MM-DD')-->
    <h2>过滤器传参: {{time|filTime('YYYY-MM-DD')}}</h2>
    <!--过滤器串联-->
    <h2>过滤器串联: {{time|filTime('YYYY-MM-DD')|mySlice}}</h2>
</div>

Vue

new Vue({
    el: "#root",
    data: {
        //当前时间戳
        time: Date.now(),
        msg:"你好,呓语!"
    },
    computed: {
        //计算属性
        fmtTime() {
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    methods: {
        //方法
        getTime() {
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    //局部过滤器
    filters: {
        //过滤器,str如果不为空使用传过来的str,为空则使用默认值'YYYY-MM-DD HH:mm:ss'
        filTime(value,str='YYYY-MM-DD HH:mm:ss') {
            return dayjs(value).format(str);
        }
    }
});

7.2 全局过滤器

Vue

<!--定义一个全局过滤器-->
Vue.filter("mySlice",function (value){
    return value.slice(0,4);
})
new Vue({
    el:"#root1",
    data:{
        msg:"你好,呓语!"
    }
})
new Vue({
    el:"#root2",
    data:{
        msg:"hello,yiyu!"
    }
})

使用

HTML

<div id="root">
    <h3 :x="msg|mySlice">{{msg|mySlice}}</h3>
</div>
<div id="root2">
    <h3>{{msg|mySlice}}</h3>
</div>

总结:

定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)

语法:

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

备注:

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