Vue中的过滤器知道多少？从是什么、怎么用、应用场景、原理分析、示例解释

Vue.js 过滤器的详细说明

定义

Vue.js 中的过滤器是一种用于处理文本显示的方式，它可以在模板表达式中使用，通过管道符 | 将数据传递给过滤器进行加工后再渲染到页面上。这种机制允许开发者轻松实现字符串格式化、数值转换等功能。

vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示

使用方法

在 Vue.js 的旧版本（2.x 及以下）中，可以通过两种方式定义过滤器：局部过滤器和全局过滤器。以下是具体的定义与调用方法：

1. 局部过滤器
   局部过滤器仅限于当前组件内部使用，需在组件选项对象中声明 filters 字段。

   export default {
     filters: {
       uppercase(value) {
         if (!value) return '';
         return value.toString().toUpperCase();
       }
     },
     data() {
       return {
         text: 'hello world'
       };
     }
   };
   

   调用时可以直接在模板中使用：

   <span>{{ text | uppercase }}</span>
   <!-- 输出结果为 HELLO WORLD -->
   

2. 全局过滤器
   如果希望在整个应用程序范围内都能使用某个过滤器，则可以将其注册为全局过滤器。

   Vue.filter('capitalize', function (value) {
     if (!value) return '';
     return value.charAt(0).toUpperCase() + value.slice(1);
   });
   

   同样地，在任何地方都可以这样调用：

   <span>{{ text | capitalize }}</span>
   <!-- 输出结果为 Hello world -->
   

应用场景

过滤器适用于各种需要对数据显示形式进行简单调整的情况，常见的应用场景包括但不限于以下几个方面：

• 格式化日期时间戳为可读性强的时间表示；
• 对货币金额添加单位前缀或保留固定位数的小数点；
• 文本大小写转换或者截断超出长度的部分；
• 动态拼接 URL 参数等操作。

原理分析

当我们在模板里书写类似于 {{ message | filterName }} 的语法结构时，实际上触发了一个特殊的编译流程。具体来说就是先获取原始绑定值作为输入参数传送给指定名称下的自定义逻辑函数执行完毕之后再返回最终经过变换后的输出结果呈现出来。整个过程完全透明无缝衔接无需额外关注底层细节即可完成所需效果。

需要注意的是，随着 Vue 3 版本发布以后官方已经废弃掉了对于内置支持 Filters API 的维护工作建议改用 Computed Properties 或者 Methods 来替代原有功能从而获得更加灵活可控的表现力同时也减少了潜在兼容性风险问题的发生几率因此如果正在考虑迁移到最新框架版本的话最好提前做好相应规划准备以便顺利过渡不影响正常业务开展进度安排哦！

示例代码

下面提供几个典型的过滤器示例及其对应的 HTML 模板展示其实际用途所在之处。

1. 日期格式化

   Vue.filter('dateFormat', function (date, fmt = 'YYYY-MM-DD') {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
     const day = String(date.getDate()).padStart(2, '0');
   
     switch (fmt.toUpperCase()) {
       case 'YYYY/MM/DD':
         return `${year}/${month}/${day}`;
       default:
         return `${year}-${month}-${day}`;
     }
   });
   

   <span>{{ new Date() | dateFormat('YYYY/MM/DD') }}</span>
   <!-- 输出结果为 当前年份/月份/日 -->
   

2. 价格格式化

   Vue.filter('priceFormat', function (value, decimalLength = 2, prefix = '$') {
     if (isNaN(parseFloat(value)) || !isFinite(value)) return '';
     const formatter = Intl.NumberFormat('en-US', {
       minimumFractionDigits: Math.max(decimalLength, 0),
       maximumFractionDigits: Math.max(decimalLength, 0)
     });
   
     return `${prefix}${formatter.format(value)}`;
   });
   

   <span>{{ 987654321.123456 | priceFormat(3, 'USD ') }}</span>
   <!-- 输出结果为 USD 987,654,321.123 -->
   

---