# 废弃的过滤器---filter - 2.x 语法 ---- filter 写法 ``` <template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p> </template> <script> export default { props: { accountBalance: { type: Number, required: true } }, filters: { currencyUSD(value) { return '$' + value } } } </script> ``` 它需要一个自定义语法，打破了大括号内的表达式 过滤器可串联，执行顺序从左到右，第二个过滤器输入值是第一个过滤器的输出值。 ~~~ <div>{{ message | formatMessage1 | formatMessage2 }}</div> ~~~ - 3.x 更新 ---- filter 写法 ---- 用方法调用或计算属性来代替 ``` <template> <h1>Bank Account Balance</h1> <p>{{ accountInUSD }}</p> </template> <script> export default { props: { accountBalance: { type: Number, required: true } }, computed: { accountInUSD() { return '$' + this.accountBalance } } } </script> ``` - 2.x 全局过滤器 ```js import * as customFilter from '@/common/filters' Object.keys(customFilter).forEach(item => Vue.filter(item, customFilter[item])) ``` - 3.x 全局过滤器 main.js ---- `app.config.globalProperties.$filters` ``` // main.js const app = createApp(App) app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } } ``` 然后，可以通过这个`$filters`对象修正所有的模板 ``` <template> <h1>Bank Account Balance</h1> <p>{{ $filters.currencyUSD(accountBalance) }}</p> </template> ```