web前端課程關(guān)于vue過濾器的那點(diǎn)事

　　web前端課程關(guān)于vue過濾器的那點(diǎn)事，關(guān)于vue的過濾器，其實(shí)在vue1.0的時候是內(nèi)置了過濾器的，但是自從到了2.0之后就被去掉了，但是我們可能還會使用到，所以就需要自己定義過濾器了，下面就帶你了解一下如何定義過濾器和過濾器都有哪些種類。

　　vue 過濾器分類

　　過濾器分為兩種，一種是局部過濾器，一種全局過濾器。所有的過濾器都是函數(shù)，并且參數(shù)為要過濾的數(shù)據(jù)。

　　局部過濾器：只允許在當(dāng)前組件中使用
全局過濾器：所有組件都可以使用

1) 局部過濾器

// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel

    var vm = new Vue({

        el: '#app',

        data: {

            msg: 'filter'

        },

        methods: {},

        //定義私用局部過濾器。只能在當(dāng)前 vue 對象中使用

        filters: {

            dataFormat(msg) {

                return msg+'xxxxx';

            }

        }

    });

以上代碼 filters 這個對象定義的就是局部過濾器，下面代碼展示在組建中如何使用過濾器：

<div id="app">

            <p>{{ msg | dataFormat}}</p>

            // 結(jié)果   filterxxxxx

    </div>

當(dāng)然你也應(yīng)該在想，這樣的過濾器使用起來可能會比較笨重，不夠靈活，過濾器既然是函數(shù)，那是否可以傳參呢？接下來我們通過參數(shù)讓過濾器的使用變得更加靈活。

// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel

    var vm = new Vue({

        el: '#app',

        data: {

            msg: 'filter'

        },

        methods: {},

        //定義私用局部過濾器。只能在當(dāng)前 vue 對象中使用

        filters: {

            // msg表示要過濾的數(shù)據(jù)

            // a表示傳入的參數(shù)

            dataFormat(msg,a) {

                return msg+a;

            }

        }

    });

    <!--html部分-->

     <div id="app">

            <p>{{ msg | dataFormat("你好")}}</p>

            <!--結(jié)果   <p>filter你好</p>-->

    </div>

2) 全局過濾器

<script>

        // 定義一個 Vue 全局的過濾器，名字叫做  toDouble 補(bǔ)零

        Vue.filter('toDouble', function(msg) {

            // 字符串的  replace 方法，第一個參數(shù)，除了可寫一個 字符串之外，還可以定義一個正則

            return msg < 10 ? msg : "0" +msg

         })

    </script>

    <!-- html // -->

    <div> {{ 9 | toDouble }} </div>

    <!-- // 結(jié)果 <div>09</div> -->

總結(jié)

全局的過濾器要比局部過濾器使用的更廣泛一些，說白了我們?yōu)槭裁匆褂眠^濾器，其實(shí)就跟使用函數(shù)是一樣，我們想把一些方法封裝，供其它組件使用，這樣調(diào)用起來方便，開發(fā)更快捷。

注意： 如果全局過濾器和局部過濾器名字重復(fù)，我們會按照遠(yuǎn)近使用，優(yōu)先級 ： 局部>全局

過濾器并不是只可以使用一個，一個數(shù)據(jù)可以用多個過濾器，從左向右執(zhí)行，注意的下一個過濾器接收的是上一個過濾器的處理結(jié)果，因此千萬要注意使用順序。