过滤器---普通过滤器使用、串联过滤器、局部与全局过滤器

过滤器：

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

语法：

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

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

备注：

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

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

前提：导入依赖

  <script type="text/javascript" src="../js/dayjs.min.js">script>

一、使用计算属性格式化时间


html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
        <script type="text/javascript" src="../js/dayjs.min.js">script>
    head>
    <body>
        <div id="root">
            <h2>显示格式化后的时间h2>
            <h3>现在是：{{fmtTime}}h3>
        div>
 
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                   time:1621561377603
                },
                computed:{
                    fmtTime(){
                        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    }
                }
            })
 
        script>   
    body>
html>

二、使用函数格式化时间


html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
        <script type="text/javascript" src="../js/dayjs.min.js">script>
    head>
    <body>
        <div id="root">
            <h2>显示格式化后的时间h2>
 
            
            <h3>现在是:{{getFmtTime()}}h3>
        div>
 
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                   time:1621561377603
                },
 
                methods: {
                    getFmtTime(){
                        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    }
                },
            })
 
        script>   
    body>
html>

三、过滤器实现时间格式化

1.普通过滤器的实现以及传入参数实现


            
            
            <h3>现在是：{{time | timeFormater}}h3>
 
            
            <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}h3>


                filters:{
                    // 当str为空的时候，我们可以给str赋值YYYY-MM-DD HH:mm:ss
                    // 当str有值的时候，直接使用传过来的值
                    timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                    }
                }

2.多个过滤器串联


 
            
            <h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss') | mySlice}}h3>


                filters:{
                    // 当str为空的时候，我们可以给str赋值YYYY-MM-DD HH:mm:ss
                    // 当str有值的时候，直接使用传过来的值
                    timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                    },
                    mySlice(value){
                        // 截取前四位
                        return value.slice(0,4)
                    }
                }

3.全局过滤器

前两课题的过滤器都是局部的过滤器

现在我们来看一下全局过滤器


        Vue.filter('mySlice',function(value){
                  return value.slice(0,4)
            })

相关阅读:
Mendix与JEECG对比
罗汉果甜苷V/益生菌修饰卵清蛋白 Mogroside V/probiotics-OVA
第P4周：猴痘病识别
如何从0到1设计积分系统？
nifi从入门到实战（保姆级教程）——身份认证
Windows10出现WIFI蓝牙图标消失，网卡驱动出现感叹号等无法上网的情况解决方案
【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程
高级性能测试系列《21.临界部分控制器：如何让锁变成动态锁，生成多把锁？》...
OpenAI首席科学家：直面AGI的可能性
扩展WiFi是什么意思

原文地址：https://blog.csdn.net/weixin_51351637/article/details/126688169