Vue.js过滤器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Marshallren/article/details/104564328

过滤器

-过滤器可被用作一些常见的文本格式化

-过滤器只能用在两个地方：1.插值表达式 2.v-bind

-过滤器应被添加在JS表达式的尾部，由“管道”符号|指示

全局过滤器：所有的vm实例都可以使用

语法：Vue.filter('过滤器名',function('插值表达式','要替换成的字符串'){})

<div id="app">
    <p>{{msg|msgFormat('爱你')}}</p>
</div>

<script>
    //定义一个Vue全局过滤器
    Vue.filter('msgFormat',function(msg,arg){
        return msg.replace(/牛逼/g,arg);
    })
    var vm = new Vue({
        el: "#app",
        data: {
            msg:'太牛逼了',
        },
    });
</script>

注意该函数要用返回值的方式返回替换的结果。

function中的形参arg也可以用=“value”的方式替换，不过这样不够灵活。

私有过滤器：定义位置：在vm中

<body>
    <div id="app">
        <h3>{{dt|dateFormat}}</h3>
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                dt: new Date()
            },
            methods: {},
            filters: {
                //定义私有过滤器
                //两个条件：过滤器名称和处理函数
                dateFormat: function (dateStr, pattern) {
                    //根据给定的事件字符串得到特定的时间
                    var dt = new Date(dateStr);
    
                    //yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()
    
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return y + "-" + m + '-' + d
                    } else {
                        var hh = dt.getHours();
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return y + "-" + m + '-' + hh + ':' + mm + ':' + ss
                    }
                }
            }
        }); 
    </script>
</body>

*过滤器就近原则：若私有过滤器和全局过滤器名称一样，优先调用私有过滤器