Vue 过滤器案例（全局过滤器和局部过滤器）

「爱情、让人受尽委屈。」 2023-02-22 05:15 37阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../js/vue-2.4.0 .js"></script>
        <title>过滤器</title>
    </head>
    <body>
        
        
        
        <div id="map">
            <h4>{ {  msg | msgFormat('疯狂', '123') | test }}</h4>
            <h3>{ {  msg | msgFormat('张三', '李四')}}</h3>
        </div>
         
        
        <div id="map2">
            <h4>{ {  dt | msgFormat }}</h4>
        </div>
        <script>
            // 全局过滤器
            Vue.filter('msgFormat', function (msg, arg, arg2){ 
                return msg.replace(/中国/g, arg + arg2)
            });
            Vue.filter('test', function (msg) { 
                return msg + '========='
            })
            var vm = new Vue({ 
                el: '#map',
                data: { 
                    msg: '中国人爱中国',
                },
                methods: { },
            })
    
            // 局部过滤器
            var vm2 = new Vue({ 
                el: '#map2',  
                data: {  dt: new Date() },
                methods: { },
                filters: {       // filters是局部过滤器，filter是局部过滤器
                    // 定义私有过滤器 两个条件 【过滤器称 和处理函数】
                    msgFormat:function(dateStr, pattern=''){      // **** 当过滤器函数里面没有参数的时候这里的形参一定要为''空
                        // 根据给定的时间字符串，得到特定的时间
                        var dt = new Date(dateStr)
                        // 将4:2:3 补充为4:02:03
                        // String.padStart(补充的位数，补充哪个数) padStart从前面补，padEnd从后面补
                        var y = dt.getFullYear().toString().padStart(2, '0')
                        var m = (dt.getMonth() + 1).toString().padStart(2, '0')  // 因为从零开始所以加1
                        var d = dt.getDate().toString().padStart(2, '0')
                        if (pattern.toLowerCase() === 'yyy-mm-dd'){    // toLowerCase() 用于把字符串转化为小写
                            return `${ y}-${ m}-${ d}`
                        }else{ 
                            var hh = dt.getHours().toString().padStart(2, '0')
                            var mm = dt.getMinutes().toString().padStart(2, '0')
                            var ss = dt.getSeconds().toString().padStart(2, '0')
                            return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`
                        }   
                    }
                }
            })
        </script>
    </body>
    </html>

![在这里插入图片描述][20200701211149894.png]

[20200701211149894.png]: https://img-blog.csdnimg.cn/20200701211149894.png