轉(zhuǎn)載自兩個(gè)地方
1.點(diǎn)擊閱讀原文
2.點(diǎn)擊閱讀原文
1.基本概念
過濾器提供了一種執(zhí)行文本轉(zhuǎn)換的方法它匕，比如說都轉(zhuǎn)成大寫字母或者幾乎做任何我們想做的事情蒲每。過濾器既可以在文本插值中使用，也可以在[v-bind指令]
Vue中的過濾器不能替代Vue中的methods婿牍、computed或者watch圆米，因?yàn)檫^濾器不改變真正的data，而只是改變渲染的結(jié)果恢共，并返回過濾后的版本。在很多不同的情況下璧亚，過濾器都是有用的，比如盡可能保持API響應(yīng)的干凈脂信，并在前端處理數(shù)據(jù)的格式癣蟋。在你希望避免重復(fù)和連接的情況下，它們也可以有效地封裝成可重用代碼塊背后的所有邏輯狰闪。
2.注冊過濾器兩種方式
使用Vue,可以有兩種不同的方式注冊過濾器：全局（一次定義到處使用）和本地過濾器疯搅。你可以跨所有組件訪問全局過濾器，而本地過濾器只允許你在其定義的組件內(nèi)部使用埋泵。
Vue.filter(name,fn)
- 第一個(gè)參數(shù)是過濾器的名稱
- 第二個(gè)參數(shù)是過濾器的函數(shù)
1. 組件內(nèi)注冊
<script>
export default {
filters: {
//定義名為'fullYearScope'過濾器來格式化date對象幔欧，使其返回當(dāng)前的年份
fullYearScope: function (value) {
return date.getFullYear();
}
}
}
</script>
2. 全局注冊
在new Vue....前，定義了過濾器那就表示它為全局過濾器丽声，它就能在項(xiàng)目中的任何地方使用礁蔗。
//注冊名為‘fullYearGlobal’的全局過濾器
Vue.filter('fullYearGlobal', function(date) {
return date.getFullYear()
})
new Vue({
render: h => h(App)
}).$mount('#app')
然后在某個(gè)組件中進(jìn)行使用：
<template>
<div>
<!-- 在網(wǎng)頁中顯示當(dāng)前年份，如2019 -->
<div>{{ new Date | fullYearGlobal }}</div>
</div>
</template>
<script>
export default {}
</script>
過濾器其實(shí)像一條管道雁社，當(dāng)該數(shù)據(jù)在該管道內(nèi)流動結(jié)束后浴井，它的形象就發(fā)生了變化，因?yàn)槲覀冊诠艿纼?nèi)對它進(jìn)行了改造霉撵，讓它變?yōu)槲覀兿胍幕钦悖摴艿谰褪歉脑炱骶褪牵篤ue.filter的函數(shù)的第二個(gè)參數(shù):
