vue过滤器 filter_vue.jsfilter函数返回[object promise]-优快云博客

本文链接：https://blog.youkuaiyun.com/zengxingX/article/details/120977650

本文详细介绍了Vue.js中的过滤器，包括如何定义全局和局部过滤器，以及如何在模板中使用它们来转换数据格式。例如，通过`reverse`过滤器实现字符串反转，`toUp`过滤器实现字符串转大写。过滤器可以接受参数并串联使用，提供了一种灵活的数据格式化方式。在Vue3中，过滤器被函数组件所替代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue过滤器-定义使用

转换格式，过滤器就是一个函数，传入值返回处理后的值

过滤器只能用在插值表达式和v-bind表达式

语法：

VUE.filter(“过滤器名”，（值) =>{return "返回处理后的函数的值"})
filters：{过滤器的名字：（值）=>{return "返回处理后的值"}}

全局过滤器写在 main.js

局部过滤器写在 App.vue 的exprot default 里面

<template>
  <div>
    <p>原来的样子:{{ msg }}</p>
    <p>翻转后:{{ msg | reverse }}</p>
    <p>大写:{{ msg | toUp }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
  // 局部过滤器
  filters: {
    toUp(val) {
      return val.toUpperCase();
    },
  },
};
</script>

<style>
</style>

//main.js 里面
// 全局过滤器
Vue.filter('reverse',  (value) =>{
  return value.split('').reverse().join('')
 
})