木灵鱼儿

木灵鱼儿

阅读:297

最后更新:2022/08/20/ 0:42:10

vue3 filter过滤器

vue3直接移除了filter过滤器,官方推荐,如果要使用过滤器可以使用computed计算属性和method函数来代替。

如果使用了全局过滤器,官方也提供了一个属性来进行迁移修复,但是也只推荐用于迁移。

const app = createApp(App)

//给当前app的全局属性上挂载一个过滤器对象
app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

使用的时候:

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

或者直接挂载方法:

app.config.globalProperties.currencyUSD = functionvalue) {
  return '$' + value 
}
export default {
  mounted() {
    console.log(this.currencyUSD(666))
  }
}

注意:

如果全局挂载了currencyUSD方法,组件自身也有currencyUSD方法,那么组件的方法会覆盖全局的方法,以组件内自己的方法优先。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 297

相关文章

目录树