[JavaScript知识库]vue3.x过滤器

1.vue3.x过滤器

vue3.x是不再支持过滤器了，已经将器移除了。取而代之的是:计算属性，方法
vue过滤器

2.计算属性

<template>
  <button @click="changzhangs">修改张三</button>
  <div>{{changeName}}</div>
</template>
<script>
export default {
  data(){
    return {
      name: '张三'
    }
  },
  methods: {
    changzhangs() {
      this.name = '往往'
    }
  },
  computed:{
    changeName(){
      console.log('修改了')
      return this.name + '张三'
    }
  }
}
</script>

或者是使用方法

<template>
  <div>
    {{messageChange()}}
  </div>
  <button @click="changeName">
    修改name
  </button>
</template>
<script>
export default {
  // setup() {
  //   const name = '张三';
  //   return {
  //     name
  //   }
  // },
  data(){
    return {
      name: '张三'
    }
  },
  methods: {
    messageChange() {
      return '$' + this.name
    },
    changeName() {
      this.name = '修改了的'
    }
  }
}
</script>

但是那全局的过滤器怎么办，如果在应用中全局注册了过滤器，那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。

取而代之的是，你可以通过全局属性以让它能够被所有组件使用到：

import { createApp } from 'vue'
// import Vue from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$filters = {
    currencyUSD(value) {
        // alert(999)
        console.log('修改零零')
        return '$' + value;
    }
}
app.mount('#app');
// 全局的计算属性
使用
```vue
<template>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>