Vue 过滤器filters及基本用法

Vue 过滤器（Filters）是一种用于格式化文本的功能，它可以在模板中使用 “管道符”（|）将数据传递给过滤器进行处理，最终返回处理后的数据。

在 Vue 中，我们可以通过定义全局过滤器或局部过滤器来实现对数据的处理，其基本用法如下：

1. 全局过滤器

在 Vue 实例化之前，我们可以通过 Vue.filter() 方法来定义全局过滤器，其语法如下：

Vue.filter('filterName', function(value) {
  // 处理逻辑
  return newValue;
})

其中，filterName 是过滤器的名称，value 是需要处理的数据，newValue 是处理后的结果。

例如，我们可以定义一个将字符串转换为大写的全局过滤器：

Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toUpperCase();
})

然后，在模板中使用时，我们可以将数据通过 “管道符” 传递给过滤器进行处理：

{{ message | uppercase }}

2. 局部过滤器

除了全局过滤器外，我们还可以在组件中定义局部过滤器，其语法如下：

filters: {
  filterName(value) {
    // 处理逻辑
    return newValue;
  }
}

例如，我们可以在组件中定义一个将数字格式化成货币的局部过滤器：

<template>
  <div>
    {{ price | currency }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 1000
    }
  },
  filters: {
    currency(value) {
      if (!value) return '';
      return '$' + value.toFixed(2);
    }
  }
}
</script>

在上述示例中，我们在组件中定义了一个名为 currency 的局部过滤器，并在模板中将 price 数据通过 “管道符” 传递给该过滤器进行处理。

在使用过滤器时，我们还可以通过参数的方式传递额外的参数，其语法如下：

{{ message | filterName(arg1, arg2, ...) }}

例如，我们可以在全局过滤器中定义一个将字符串截取指定长度的过滤器：

Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  if (value.length <= length) return value;
  return value.substring(0, length) + '...';
})

然后，在模板中使用时，我们可以通过参数的方式指定截取的长度：

{{ message | truncate(10) }}

上述示例中，我们将 message 数据通过 “管道符” 传递给 truncate 过滤器，并指定截取的长度为 10。最终输出结果为截取后的字符串。