vue中的过滤器是对要显示的数据进行特定格式化后进行显示。比如最常用的保留两位小数,我们就可以用过滤器实现,它并没有改变原始数据的值,只是通过新的方式显示出来。功能类似于angular中的管道。

对于过滤器要知道两点

1.对要显示的数据进行特定格式化后再显示。

2.并没有改变原本的数据,只是用新的数据进行显示。

3.过滤器的本质就是一个函数

0.简单的用法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>

<body>
    <div id="root">
        <h3>格式化前的时间{{time}}</h3>
        <h3>格式化后的时间{{time | timeFormat }}</h3>
       
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
                time:new Date().getTime()  //获取时间戳
            },
            
            //过滤器
            filters:{
                timeFormat(value){
                    //value值就是 ‘|’ 的值,return 会直接替换掉原来的值
                    console.log(value)
                    return  moment(value).format("YYYY-MM-DD")
                }
            }
        
        })
    </script>
</body>
</html>

效果如下:

上方所谓的过滤器就是 {{ time | timeFormat}} 这一部分,主要是“|” 这个符号解析的,vue读取的时候,先将“|” 符号前的time 作为传递到 timeFormat这个函数中,这个函数调用了momentjs对时间进行了格式化然后返回到页面中进行展示。

当然这个也支持自定义参数格式,也就是你的时间格式化的结果 不一定只有一种,可能有很多种。

2.组合用法

过滤器可以多个连在一起用,类似{{ time | timeFormat | str1 | str2 }} 这种,原则上可以无限套娃,但是实际开发中用的并不多,最多用过两层。

举例来说,上面的我们格式化时间后假如只想截取前几位,那么可以用字符串截取函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>

<body>
    <div id="root">
        <h3>格式化前的时间{{time}}</h3>
        <h3>格式化后的时间{{time | timeFormat }}</h3>

        <h3>格式化前的字符串{{str}}</h3>
        <h3>格式化后的字符串{{str | mystr | mySlice}}</h3>
    </div>
    <script type="text/javascript">
         new Vue({
            el: '#root',
            data:{
                time:new Date().getTime(),  //获取时间戳
                str:"ni hao!"
            },
            
            //过滤器
            filters:{
                timeFormat(value){
                    //value值就是 ‘|’ 的值,return 会直接替换掉原来的值
                    console.log(value)
                    return  moment(value).format("YYYY-MM-DD")
                },
                //字符串截取过滤器
                mySlice(value){
                    console.log("mySlice",value)
                    return value.slice(0,3)
                },
                //字符串拼接过滤器
                mystr(value){
                    console.log("mystr",value)
                    return value+"hello"
                }
            }
        
        })
    </script>
</body>

</html>

效果图如下:

可以看出,字符按第一个过滤器执行的结果是 ni hao!hello

按照第二个过滤器执行的结果是hi