vue .filter

Vue.js 中的过滤器（Filter）是一种可复用的功能，用于将数据格式化并呈现给用户。它们在模板表达式中使用“管道”符号“|”来表示，可以接收一个或多个参数，然后返回过滤后的值。

使用 Vue.js 的过滤器能够让我们轻松地实现一些在模板中处理数据的操作，如格式化日期、货币和文本等。我们可以在 Vue 实例中定义全局过滤器，也可以在组件内部定义本地过滤器。

下面是一个简单的例子，演示了如何在 Vue.js 中定义和使用过滤器：

<!-- 全局过滤器 -->
<div>{{ message | capitalize }}</div>

<!-- 组件内部定义本地过滤器 -->
<div>{{ message | capitalize2 }}</div>

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

// 组件内部定义本地过滤器
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  filters: {
    capitalize2(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
}

在上面的例子中，我们定义了两个过滤器，一个是全局过滤器，一个是组件内部定义的本地过滤器。它们都将字符串的首字母转换为大写字母，然后返回结果。

需要注意的是，过滤器并不会改变原始数据，而是返回一个处理后的副本。如果我们想要在模板中直接修改数据，可以使用计算属性或者监听属性来实现。