Vue3.0过滤器

Vue3.0过滤器

• 官网准确说已经移除了

• 但又换了另一个方法全局属性来代替它

全局属性

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

在页面中使用

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

优化

• 在根目录创建filters目录创建index.js

• main.js写入如下代码

//main.js
// 过滤器
import filters from "@/filters";
app.config.globalProperties.$filters = filters;

• filters>index.js 内容

export default {
  currencyUSD(value) {
	return '$' + value
  }
}