關于vue的過濾器，其實在vue1.0的時候是內置了過濾器的，但是自從到了2.0之后就被去掉了，但是我們可能還會使用到，所以就需要自己定義過濾器了，下面千鋒長沙前端培訓講師就帶你了解一下如何定義過濾器和過濾器都有哪些種類。

       vue 過濾器分類：過濾器分為兩種，一種是局部過濾器，一種全局過濾器。所有的過濾器都是函數，并且參數為要過濾的數據。局部過濾器：只允許在當前組件中使用。全局過濾器：所有組件都可以使用。

1) 局部過濾器

// 創建 Vue 實例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

msg: 'filter'

},

methods: {},

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

filters: {

dataFormat(msg) {

return msg+'xxxxx';

}

}

});

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

<div id="app">

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

// 結果 filterxxxxx

</div>

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

// 創建 Vue 實例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

msg: 'filter'

},

methods: {},

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

filters: {

// msg表示要過濾的數據

// a表示傳入的參數

dataFormat(msg,a) {

return msg+a;

}

}

});

<!--html部分-->

<div id="app">

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

<!--結果 <p>filter你好</p>-->

</div>

2) 全局過濾器

<script>

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

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

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

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

})

</script>

<!-- html // -->

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

<!-- // 結果 <div>09</div> -->

       全局的過濾器要比局部過濾器使用的更廣泛一些，說白了我們為什么要使用過濾器，其實就跟使用函數是一樣，我們想把一些方法封裝，供其它組件使用，這樣調用起來方便，開發更快捷。

       注意： 如果全局過濾器和局部過濾器名字重復，我們會按照遠近使用，優先級 ： 局部>全局過濾器并不是只可以使用一個，一個數據可以用多個過濾器，從左向右執行，注意的下一個過濾器接收的是上一個過濾器的處理結果，因此千萬要注意使用順序。

上一篇

千鋒長沙Java培訓：HarmonyOS快速入門

下一篇

千鋒長沙前端培訓：小程序開發中云函數的應用