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

过滤器：

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

语法：

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)
            })

相关阅读:
2023-2028年中国硫酸铝钾市场发展态势及未来发展趋势报告
Java 多线程系列Ⅳ（单例模式+阻塞式队列+定时器+线程池）
HbnnMall电子商城系统介绍（功能与技术栈）
MySQL 高级语句 Part1（进阶查询语句+MySQL数据库函数+连接查询）
【网关路由测试】——容错行为测试
MySQL修改时间添加时间自动更新
Stable Diffusion被爆包含性别、种族歧视！比AI更可怕的是人类的偏见......
来围观 WasmEdge 7月社区会议都说了些啥
2 HTML
Scala系列从入门到精通（三）

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