Vue中的过滤器

十八岁讨厌编程

已于 2022-07-15 00:09:41 修改

阅读量854

点赞数 5

分类专栏： Vue # Vue2 文章标签： vue.js javascript 前端

于 2022-06-09 16:45:47 首次发布

本文链接：https://blog.csdn.net/zyb18507175502/article/details/125204341

版权

Vue 同时被 2 个专栏收录

41 篇文章 10 订阅

订阅专栏

41 篇文章 1 订阅

订阅专栏

文章目录

案例
使用计算属性完成
使用methods实现
使用过滤器实现
全局过滤器
其他的使用场景
过滤器总结

过滤器并非一个必须要使用的东西，它只是Vue给我们提供的一种数据处理方式。想用就用，不想用可以使用其它的办法进行替换(例如计算属性，methods方法)

案例

我们经常会遇到一种情况：将时间戳格式化为特定的形式。现在我们使用三种方法来完成这个需求：

计算属性
methods方法
过滤器

效果如下：
在这里插入图片描述

使用计算属性完成

我们在这里可以引用第三方库。我们在bootCDN.cn上面可以找到，其中较为好用的时间第三方库是moment.js：
在这里插入图片描述
他的功能非常强大，不过它的体积稍微有点大。我们可以使用他的轻量化版本dayjs:

打开GitHub查看其使用文档：
在这里插入图片描述
代码如下：

<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>Document</title>
    <script type="text/javascript" src="../VueEnvironment/vue.js"></script>
    <script type="text/javascript" src="../VueEnvironment/dayjs.min.js"></script>
    
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{fmtTime}}</h3>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        }
    })
</script>
</html>

使用methods实现

代码如下：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{getfmtTime()}}</h3>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        methods: {
            getfmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }

        },
    })
</script>

使用过滤器实现

使用步骤：

先写正常要展示的数据
配置过滤器

代码如下：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time | timeFormater}}</h3>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        filters:{
            timeFormater(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            }
        }
   
    })
</script>

注意：

格式：原始数据 | 过滤器的名字
过滤器的本质就是函数
我们要为过滤器添加新的配置项filter才能使用
执行过程：首先捕获到{{}}中的东西，再读取time，随后把time作为参数传给timeFormater也就是过滤器，最后使用过滤器的返回值将{{}}进行替换呈现

过滤器还可以传递参数，例如我们可以这样：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        filters:{
            timeFormater(value,str){
                return dayjs(value).format(str)
            }
        }
   
    })
</script>

效果：
在这里插入图片描述

不管你写不写这个value，他都是会默认给我们传进去的

过滤器还可以串联
例如我们接着上面的案例，现在我们只显示年份：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        filters:{
            timeFormater(value,str){
                return dayjs(value).format(str)
            },
            mySlice(value){
                return value.slice(0,4)
            }
        }
   
    })
</script>

过程如图：
在这里插入图片描述
先将time交给第一个过滤器timeFormater，timeFormater工作之后的结果再交给下一个过滤器mySlice。time不会交给mySlice直接处理的，而是一层层的处理的。

同时还要注意：我们在Vue中的filters中配置的过滤器，都是局部过滤器
在这里插入图片描述
也就是说在别的Vue实例或者别的组件中是不能共用的。

全局过滤器

我们可以把上面一个案例中的mySlice配置为全局过滤器，代码如下：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
    </div>
    
</body>
<script>
    Vue.filter('mySlice',(value) => {return value.slice(0,4)})
    
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime()
        },
        filters:{
            timeFormater(value,str){
                return dayjs(value).format(str)
            },
        }
   
    })
</script>

注意：

要在new Vue的实例对象之前就配置好
全局过滤器只能一个个的配置

其他的使用场景

除了在插值语法中可以使用过滤器之外，我们还可以在v-bind中使用，例如：

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
        <h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
        <h3 :x="name | mySlice()">现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
    </div>
    
</body>
<script>
    Vue.filter('mySlice',(value) => {return value.slice(0,4)})
    
    new Vue({
        el:'#root',
        data:{
            time:new Date().getTime(),
            name:'csdn哈哈哈'
        },
        filters:{
            timeFormater(value,str){
                return dayjs(value).format(str)
            },
        }
   
    })
</script>