過濾器

聲明：本文主要是照着官網教學自己敲了一遍，純屬動手練習，沒什麼技術含量。

簡介：

Vue2.x允許我們自定義過濾器，用來過濾模型數據，在顯示之前對數據進行篩選、處理等操作。過濾器可分爲全局過濾器和局部(本地)過濾器。
注：Vue1.x存在一些內置的過濾器，但是在Vue2.x時，這些內置的過濾器被取消掉了；如果需要使用過濾器，那就只有靠我們自己定義了。

自定義全局過濾器(示例)：

測試代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - 過濾器</title>
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        // 定義全局過濾器(示例)
        Vue.filter('filterId', function (value) {
            if (!value) { 
                return '';
            }
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        });

        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    msg: 'just do it!'
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <h4>使用全局過濾器前:</h4>
        <p>{{msg}}</p>
        <input type="button" v-bind:value="msg">
        <br />

        <h4>使用全局過濾器後:</h4>
        <!-- 用法一: 與{{}}搭配使用 -->
        <p>{{msg | filterId}}</p>
        
        <!-- 用法二: 與v-bind搭配使用-->
        <input type="button" v-bind:value="msg | filterId">
    </div>
</body>

</html>

效果：

自定義局部(本地)過濾器(示例)：

測試代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - 過濾器</title>
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    msg: 'just do it!'
                },
                // 定義局部(本地)過濾器(示例)
                filters: {
                    filterId: function (value) {
                        if (!value) {
                            return '';
                        }
                        value = value.toString();
                        return value.charAt(0).toUpperCase() + value.slice(1);
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <h4>使用全局過濾器前:</h4>
        <p>{{msg}}</p>
        <input type="button" v-bind:value="msg">
        <br />

        <h4>使用全局過濾器後:</h4>
        <!-- 用法一: 與{{}}搭配使用 -->
        <p>{{msg | filterId}}</p>
        <!-- 用法二: 與v-bind搭配使用-->
        <input type="button" v-bind:value="msg | filterId">
    </div>
</body>

</html>

效果：

局部過濾器優先：

當存在相同id的全局過濾器和局部過濾器時，局部過濾器優先。

測試代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - 過濾器</title>
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        // 定義過濾器id爲filterId的 全局過濾器
        Vue.filter('filterId', function (value) {
            if (!value) {
                return '';
            };
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        });

        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    msg: 'just do it!'
                },
                // 定義過濾器id爲filterId的 局部過濾器
                filters: {
                    filterId: function (value) {
                        if (!value) {
                            return '';
                        };
                        value = value.toString();
                        return value + "我是一隻小小小小鳥~";
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <p>{{msg | filterId}}</p>
    </div>
</body>

</html>

效果：

過濾器的用法(`{{}}`與`v-bind`)：

提示：過濾器與v-bind搭配使用的用法，從Vue2.1.0+版本纔開始支持。

多參數的過濾器：

過濾器的第一個參數值，默認接收的是Vue動態綁定的數據；如果需要其它的參數，那麼需要顯示傳值。

測試代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - 過濾器</title>
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    msg: 9
                },
                filters: {
                    // 過濾器中, 第一個參數，默認是 動態綁定的數據
                    filterA: function (value) {
                        return value + 1;
                    },
                    /*
                     * 如果需要其它的參數, 那麼還需在形參這裏額外定義
                     */
                    filterB: function (value, additionalParamOne) {
                        return (value  + 1) * additionalParamOne;
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <p>msg 結果爲: {{msg}}</p>

        <!-- 只有一個參數的過濾器，可直接使用過濾器id即可(即: 首參數可不寫，是默認的) -->
        <p>msg | filterA 結果爲: {{msg | filterA}}</p>

        <!--當有多個參數時, 首參數不寫, 需要寫其它的參數 -->
        <p>msg | filterB(10) 結果爲: {{msg | filterB(10)}}</p>
    </div>
</body>

</html>

效果：

多過濾器搭配使用：

當對同一個數據對象使用多個過濾器時，那麼這些過濾器會挨個挨個執行，上一個過濾器的結果，會作爲下一個過濾器的第一個參數對象。

測試代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - 過濾器</title>
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    msg: 9
                },
                // 定義局部(本地)過濾器(示例)
                filters: {
                    filterA: function (value) {
                        return value + 1;
                    },
                    filterB: function (value, additionalParamOne) {
                        return value * additionalParamOne;
                    },
                    filterC: function (value, additionalParamOne, additionalParamTwo) {
                        return additionalParamOne + value + additionalParamTwo;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="myId">
        <p>msg 結果爲: {{msg}}</p>
        <p>msg | filterA 結果爲: {{msg | filterA}}</p>
        <p>msg | filterA | filterB(10) 結果爲: {{msg | filterA | filterB(10)}}</p>
        <p>msg | filterA | filterB(10) | filterC("戀愛", "分百") 結果爲: {{msg | filterA | filterB(10) | filterC("戀愛", "分百")}}</p>
    </div>
</body>
</html>

效果：

^_^ 如有不當之處，歡迎指正

^_^ 學習整理自
https://cn.vuejs.org/v2/guide/filters.html

^_^ 本文已經被收錄進《程序員成長筆記(六)》，筆者JustryDeng

簡介：

自定義全局過濾器(示例)：

自定義局部(本地)過濾器(示例)：

局部過濾器優先：

過濾器的用法(`{{}}`與`v-bind`)：

多參數的過濾器：

多過濾器搭配使用：

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

【jdk1.8特性】之Stream(上)

vue入門示例

SpringBoot profile整合Maven profile實現多環境下配置、依賴自動切換

ThreadLocal數據觀察及原理驗證

一個走心的RedisUtil工具類

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

過濾器

簡介：

自定義全局過濾器(示例)：

自定義局部(本地)過濾器(示例)：

局部過濾器優先：

過濾器的用法({{}}與v-bind)：

多參數的過濾器：

多過濾器搭配使用：

過濾器的用法(`{{}}`與`v-bind`)：