1 简介

　　过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

　　Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

　　ps: Vue3中已废弃filter，如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

2 语法

2.1 过滤器注册

　　1）Vue.filter(name,callback)

　　2）new Vue(

　　　　   filters:{}

　　   )

 

2.2 过滤器使用

　　1）{{xxx | 过滤器1名称 |过滤器2名称}}

　　2）v-bind:属性="xxx|过滤器1名称 | 过滤器2名称"

 

2.3 备注

　　过滤器会默认把过滤的数据作为参数，也可以自己添加参数

　　过滤器没有改变原来的数据，而是产生新的数据

 

3 示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>过滤器</title>
        <script type="text/javascript" src="/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
            <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
            <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false
        // 全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,11)
        })
        new Vue({
            el:'#root',
            data:{
                time:1626750147900,
            },
            // 局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
    </script>
</html>