Vue 过滤器（Vue3已移除）

yume_sibai

已于 2025-06-26 21:01:58 修改

阅读量312

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-06-26 20:27:42 首次发布

本文链接：https://blog.csdn.net/2301_78939167/article/details/148932584

过滤器：

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

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})

2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 ="xxx | 过滤器名"

备注：

1.过滤器也可以接受额外参数，多个过滤器也可以串联

2.并没有改变原本的数据，是产生新的对应的数据

利用dayjs插件格式化时间戳。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        <script type="text/javascript" src="../js/dayjs.min.js"></script>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <div id="root">
            <h1>格式化后的时间</h1>
            <!-- methods实现 -->
            <h2>{{formatTime()}}</h2>

            <!-- 计算属性实现 -->
            <h2>{{timeFormat}}</h2>

            <!-- 过滤器实现 -->
            <!-- 不传参 -->
            <h2>{{time | timeFormater('YYYY年MM月DD日') | mySliceFilter}}</h2>
            <!-- 传参 -->
            <h2>{{time | timeFormater('YYYY年MM月DD日') | mySliceFilter}}</h2>

            <!-- v-bind也可以使用过滤器 -->
            <!-- 输出为hell -->
            <input type="text" :x="name | mySlice">
        </div>
        
        <script type="text/javascript">
            Vue.config.productionTip = false

            //全局过滤器，但一个Vue.filter都只能写一个回调函数
            Vue.filter('mySliceFilter',function(value){
                return value.slice(0,4)
            })

            new Vue({
                el:'#root',
                data:{
                    time:Date.now(),
                    name:'hello Vue'
                },
                methods: {
                    formatTime(){
                        return dayjs(this.time).format('YYYY_MM_DD HH:mm:ss')
                    }
                },
                computed:{
                    timeFormat(){
                        return dayjs(this.time).format('YYYY_MM_DD HH:mm:ss')
                    }
                },
                //局部过滤器，可以写多个回调函数
                filters:{
                    timeFormater(value,str='YYYY_MM_DD HH:mm:ss'){
                        return dayjs(this.time).format(str)
                    },
                    mySlice(value){
                        return value.slice(0,4)
                    }
                }
            })
        </script>
    </body>
</html>