vue 過濾器

1 關于 vue 過濾器

在vue1.0的時候其實是內置了過濾器的，但是考慮到好多過濾器并不一定會被開發(fā)所調用，所以把原本內置的過濾器就給去掉了，但是過濾器還是比較普遍的，所以我們從vue2.0之后就需要自己定義過濾器

2 vue 過濾器分類

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

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

1) 局部過濾器

// 創(chuàng)建 Vue 實例，得到 ViewModelvar 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>

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

// 創(chuàng)建 Vue 實例，得到 ViewModelvar 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> -->

總結

全局的過濾器要比局部過濾器使用的更廣泛一些，說白了我們?yōu)槭裁匆褂眠^濾器，其實就跟使用函數是一樣，我們想把一些方法封裝，供其它組件使用，這樣調用起來方便，開發(fā)更快捷。
?注意： 如果全局過濾器和局部過濾器名字重復，我們會按照遠近使用，優(yōu)先級 ： 局部>全局
?
過濾器并不是只可以使用一個，一個數據可以用多個過濾器，從左向右執(zhí)行，注意的下一個過濾器接收的是上一個過濾器的處理結果，因此千萬要注意使用順序

此文轉載自：

千鋒HTML5學院

原文鏈接：

千鋒HTML5學院：vue 過濾器

---

擴展：

Eric：Webpack4.x配置示例demo?zhuanlan.zhihu.comEric：Vue-Router路由與配置，希望學習前端的小伙伴能用上?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的vue filter对象_vue 过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。