Vue.js过滤器的使用

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：（Vue.js官网）

下面用一个时间格式做个例子：

msg : new Date()

//需要过滤的数据

{{ msg | timeFormat}}

//定义全局的过滤器

//.toString().padStart(2,'0') 时间格式补齐

Vue.filter('timeFormat', function (dateStr, pattern = ' ') {

        var dt = new Date(dateStr);

        var y = dt.getFullYear();

        var m = (dt.getMonth() + 1).toString().padStart(2, '0');

        var d = (dt.getDay()).toString().padStart(2, '0');

        if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {

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

        }

    })

上面是定义全局的过滤器，下面的话定义一个私有过滤器：

//需要过滤的数据

{{ msg | timeFormat}}

//定义私有过滤器

var vm= new Vue({

el:'#app',

data:{

msg : new Date()

},

methods:{

},

filters:{

dtFormate(dateStr, pattern = ' ') {

                var time = new Date(dateStr)

                var y = time.getFullYear();

                var m = time.getMonth() + 1;

                var d = time.getDay();

                if (pattern.toLowerCase() == 'yyyy-mm-dd') {

                    return `${y}-${m}-${d}`

                } else {

                    var hh = time.getHours()

                    var mm = time.getMinutes()

                    var ss = time.getSeconds()

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

                }

            }

}

})

以上两个例子的第二个参数：  pattern = ' '，是为了输出格式做修改，方便用户需求。

过滤器可以串联：（Vue.js官网）

{{ message | filterA | filterB }}