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

ゞ浴缸里的玫瑰 2024-04-07 12:53 14阅读 0赞

过滤器：

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

语法：

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

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

备注：

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

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

**目录**

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

二、使用函数格式化时间

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

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

2.多个过滤器串联

3.全局过滤器

--------------------

**前提：导入依赖**

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

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <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>

## 二、使用函数格式化时间 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <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>

![0a7eb0d0ca25409586a466c49b0ef03d.png][]

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

![b53d50205b2344b98b35d8ecfe08952a.png][]

![6943fe2437434fd19e44dfe1617254cc.png][]

### 3.全局过滤器 ###

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

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

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

[0a7eb0d0ca25409586a466c49b0ef03d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/dcee194a9ddc408b8bf4104726bbb2a7.png
[b53d50205b2344b98b35d8ecfe08952a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/43c26ee56c9d4079a91c17ab571c3e93.png
[6943fe2437434fd19e44dfe1617254cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a076ad11f2f545cb94f449393c9a7007.png