Vue 學習筆記 — filter

時間 2019-11-10

標籤 vue 學習筆記 filter 简体版

原文原文鏈接

簡書html

對將要插入html的對象進行處理vue

一個簡單的Vue示例
基本過濾器用法
帶參數的過濾器
全局過濾器

(這張圖片有點問題,最後顯示的應該是 hello world不是null)
code
過濾器的簡單應用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>vPager</title>
        <script src="vue.js"></script>
    </head>

    <body>

        <div id="test">
            <div>a:{{a | NoFiniteToZero(true)}}</div>
            <div>b:{{b | yyyy-MM-dd}}</div>
            <div>c:{{c | NoFiniteToZero}}</div>
            <div>d:{{d | NoFiniteToZero}}</div>
            <div>e:{{e | RunIfFunction}}</div>
        </div>

        <script>
            Vue.filter('yyyy-MM-dd', function(value) {
                if(value == null) return "";
                if(value.constructor === Date) {
                    return [value.getFullYear()
                            , value.getMonth() + 1
                            , value.getDate()
                            ].join("-");
                }
                return value
            });
            Vue.filter('NoFiniteToZero', function(value, numberOnly) {
                if(numberOnly && typeof value !== "number") return value || "";
                if(value == null) return "0";
                return isFinite(value) ? value : 0;
            });
            Vue.filter('RunIfFunction', function(value) {
                if(value == null) return "";
                if(typeof value === "function") {
                    return arguments.callee(value());
                }
                return value;
            }); 

            var xx = new Vue({
                el: "#test",
                data: {
                    a: null,
                    b: new Date(),
                    c: NaN,
                    d: Infinity,
                    e: function() { return function(){ return "ye"; } }
                }
            });
        </script>
    </body>

</html>