web前端課程關(guān)于vue過(guò)濾器的那點(diǎn)事，關(guān)于vue的過(guò)濾器，其實(shí)在vue1.0的時(shí)候是內(nèi)置了過(guò)濾器的，但是自從到了2.0之后就被去掉了，但是我們可能還會(huì)使用到，所以就需要自己定義過(guò)濾器了，下面就帶你了解一下如何定義過(guò)濾器和過(guò)濾器都有哪些種類。
vue 過(guò)濾器分類
過(guò)濾器分為兩種，一種是局部過(guò)濾器，一種全局過(guò)濾器。所有的過(guò)濾器都是函數(shù)，并且參數(shù)為要過(guò)濾的數(shù)據(jù)。
局部過(guò)濾器：只允許在當(dāng)前組件中使用
全局過(guò)濾器：所有組件都可以使用
1) 局部過(guò)濾器
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'filter'
},
methods: {},
//定義私用局部過(guò)濾器。只能在當(dāng)前 vue 對(duì)象中使用
filters: {
dataFormat(msg) {
return msg+'xxxxx';
}
}
});
以上代碼 filters 這個(gè)對(duì)象定義的就是局部過(guò)濾器，下面代碼展示在組建中如何使用過(guò)濾器：
<div id="app">
<p>{{ msg | dataFormat}}</p>
// 結(jié)果 filterxxxxx
</div>
當(dāng)然你也應(yīng)該在想，這樣的過(guò)濾器使用起來(lái)可能會(huì)比較笨重，不夠靈活，過(guò)濾器既然是函數(shù)，那是否可以傳參呢？接下來(lái)我們通過(guò)參數(shù)讓過(guò)濾器的使用變得更加靈活。
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'filter'
},
methods: {},
//定義私用局部過(guò)濾器。只能在當(dāng)前 vue 對(duì)象中使用
filters: {
// msg表示要過(guò)濾的數(shù)據(jù)
// a表示傳入的參數(shù)
dataFormat(msg,a) {
return msg+a;
}
}
});
<!--html部分-->
<div id="app">
<p>{{ msg | dataFormat("你好")}}</p>
<!--結(jié)果 <p>filter你好</p>-->
</div>
2) 全局過(guò)濾器
<script>
// 定義一個(gè) Vue 全局的過(guò)濾器，名字叫做 toDouble 補(bǔ)零
Vue.filter('toDouble', function(msg) {
// 字符串的 replace 方法，第一個(gè)參數(shù)，除了可寫(xiě)一個(gè) 字符串之外，還可以定義一個(gè)正則
return msg < 10 ? msg : "0" +msg
})
</script>
<!-- html // -->
<div> {{ 9 | toDouble }} </div>
<!-- // 結(jié)果 <div>09</div> -->
總結(jié)
全局的過(guò)濾器要比局部過(guò)濾器使用的更廣泛一些，說(shuō)白了我們?yōu)槭裁匆褂眠^(guò)濾器，其實(shí)就跟使用函數(shù)是一樣，我們想把一些方法封裝，供其它組件使用，這樣調(diào)用起來(lái)方便，開(kāi)發(fā)更快捷。
注意： 如果全局過(guò)濾器和局部過(guò)濾器名字重復(fù)，我們會(huì)按照遠(yuǎn)近使用，優(yōu)先級(jí) ： 局部>全局
過(guò)濾器并不是只可以使用一個(gè)，一個(gè)數(shù)據(jù)可以用多個(gè)過(guò)濾器，從左向右執(zhí)行，注意的下一個(gè)過(guò)濾器接收的是上一個(gè)過(guò)濾器的處理結(jié)果，因此千萬(wàn)要注意使用順序。
京公網(wǎng)安備
11010802035719號(hào)