Vue 过滤器案例(全局过滤器和局部过滤器)


<!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>
    <!-- 两个过滤器的名称都为msgFormat,但是控制不同作用,一个是全局的,一个是局部的 -->
    <!-- 如果全局和局部过滤器名称一样,优先调用局部过滤器 -->
    <!-- 全局过滤器示例 -->
    <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>

Vue 过滤器案例(全局过滤器和局部过滤器)_第1张图片

你可能感兴趣的:(Vue 过滤器案例(全局过滤器和局部过滤器))