Vue 过滤器

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

一、定义全局过滤器：

JS部分：

1 var app = new Vue({
2     el: "#app",
3     data() {
4         return {
5             msg: "我是谁，我从哪里来，我又要往哪里去"
6         }
7     }
8 });

// 定义一个过滤器,没有传入参数
// 将 data 字符串里的 “哪里”，全部替换成 “这里”
Vue.filter("msgFmt", function (data) {
    return data.replace(/哪里/g, "这里");
});

// 有参数的过滤器
// 将 data 字符串里的 “哪里”，全部替换成 传入的 arg 字符串
Vue.filter("msgFmt1", function (data,arg) {
    return data.replace(/哪里/g, arg);
});

调用：

    <div id="app">
        <p>{{ msg | msgFmt }}</p>

        <p>{{ msg | msgFmt1("天堂") }}</p>
    </div>

显示结果：

 二、定义局部过滤器

局部过滤器，只能在VM控制得范围内起作用。

JS部分：

    var app1 = new Vue({
        el: "#app1",
        data() {
            return {
                date: new Date()
            }
        },
        filters:{
            dateFmt(dateStr,fmt=""){
                var date = new Date(dateStr)

                var y = date.getFullYear();
                var m = (date.getMonth()+1).toString().padStart(2,"0");
                var d = date.getDate().toString().padStart(2,'0');

                if(fmt.toLowerCase()=="yyyy-mm-dd"){
                    return `${y}-${m}-${d}`;
                }else{
                    var h = date.getHours().toString().padStart(2,"0");
                    var min = date.getMinutes().toString().padStart(2,"0");
                    var s = date.getSeconds().toString().padStart(2,"0");

                    return `${y}-${m}-${d} ${h}:${min}:${s}`;
                }
            }
        }
    });

调用：

    <div id="app1">
        <p>{{ date | dateFmt }}</p>

        <p>{{ date | dateFmt("yyyy-MM-dd") }}</p>
    </div>

显示：

注意：当局部过滤器和全局过滤器，名字相同时，局部过滤器会覆盖掉全局的过滤器。