vue filter 实现

Vue.js 过滤器（Filter）实现方法

Vue.js 的过滤器用于格式化文本，可以在双花括号插值和 v-bind 表达式中使用。以下是实现过滤器的几种方法：

全局过滤器注册

在 Vue 实例化之前，通过 Vue.filter() 方法全局注册过滤器，所有组件均可使用：

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

new Vue({ /* options */ });

使用方式：

<p>{{ message | capitalize }}</p>

局部过滤器注册

在组件选项中通过 filters 属性定义局部过滤器，仅当前组件可用：

new Vue({
  filters: {
    reverse(value) {
      return value.split('').reverse().join('');
    }
  }
});

使用方式：

<p>{{ text | reverse }}</p>

链式调用过滤器

多个过滤器可以串联使用，执行顺序从左到右：

<p>{{ price | currency | decimal }}</p>

带参数的过滤器

过滤器可以接收额外参数：

Vue.filter('truncate', function(value, length) {
  return value.length > length ? value.substring(0, length) + '...' : value;
});

使用方式：

<p>{{ longText | truncate(50) }}</p>

注意事项

1. Vue 3 已移除过滤器功能，建议使用计算属性或方法替代
2. 过滤器应设计为纯函数，避免产生副作用
3. 复杂逻辑建议使用计算属性而非过滤器

替代方案（Vue 3 推荐）：

const app = Vue.createApp({
  methods: {
    capitalize(value) {
      /* 实现逻辑 */
    }
  }
});

模板中使用：

<p>{{ capitalize(text) }}</p>