Vue filter实战详解

在 Vue.js 中，filter 是一种用于在模板中对数据进行格式化的功能。它可以用来对数据进行处理、过滤或格式化，然后在模板中直接使用。

filter 是一种全局的 Vue 实例方法，可以在任何组件的模板中使用。

1.定义全局过滤器： 在 Vue 实例创建之前，可以通过 Vue.filter 方法定义。

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

在模板中使用过滤器：在模板中使用过滤器时，通过 | 符号将过滤器名称添加到表达式中。

<!-- 在模板中使用过滤器 -->
<div>{{ message | capitalize }}</div>

2.过滤器携带参数

// 定义带参数的过滤器
Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  value = value.toString();
  return value.length > length ? value.slice(0, length) + '...' : value;
});

在模板中使用带参数的过滤器：

<!-- 在模板中使用带参数的过滤器 -->
<div>{{ longText | truncate(20) }}</div>

3.定义局部过滤器：

 data: {
    message: 'hello'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }

在模板中使用局部过滤器：

<!-- 在模板中使用局部过滤器 -->
<div>{{ message | capitalize }}</div>

4.过滤器链：(使用多个过滤器)

可以在模板中使用多个过滤器，它们会按顺序执行

<!-- 过滤器链 -->
<div>{{ message | capitalize | truncate(10) }}</div>

5.总结

• 过滤器可以在模板中对数据进行格式化、处理或过滤。
• 可以定义全局过滤器和局部过滤器，全局过滤器适用于整个应用，局部过滤器适用于单个组件。
• 过滤器可以带参数，也可以在模板中进行链式调用。