Vue 2过滤器的使用及在Vue 3中的变化

在 Vue 2 中，过滤器（Filters）是一种用于格式化文本的工具，通常用于在模板中对数据进行简单的文本处理。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式中。过滤器通过管道符 | 进行调用。

1. 定义过滤器

过滤器可以在全局或局部定义。

全局过滤器

全局过滤器通过 Vue.filter 方法定义，可以在任何 Vue 实例中使用。

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

局部过滤器

局部过滤器在 Vue 组件的 filters 选项中定义，只能在该组件中使用。

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

2. 使用过滤器

过滤器可以通过管道符 | 在模板中使用。

<div id="app">
  <!-- 双花括号插值中使用过滤器 -->
  <p>{{ message | capitalize }}</p>

  <!-- v-bind 表达式中使用过滤器 -->
  <p v-bind:title="message | capitalize">Hover me</p>
</div>

3. 过滤器链

过滤器可以串联使用，前一个过滤器的输出会作为下一个过滤器的输入。

<div id="app">
  <p>{{ message | capitalize | reverse }}</p>
</div>

Vue.filter('reverse', function (value) {
  if (!value) return '';
  return value.split('').reverse().join('');
});

4. 过滤器参数

过滤器可以接受参数，参数通过冒号 : 传递。

<div id="app">
  <p>{{ message | capitalize | truncate(10) }}</p>
</div>

Vue.filter('truncate', function (value, length) {
  if (!value) return '';
  if (value.length > length) {
    return value.slice(0, length) + '...';
  }
  return value;
});

5. Vue 3 中的变化

在 Vue 3 中，过滤器已经被移除。官方建议使用计算属性或方法来实现类似的功能。

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  computed: {
    capitalizedMessage() {
      if (!this.message) return '';
      return this.message.charAt(0).toUpperCase() + this.message.slice(1);
    }
  }
});

<div id="app">
  <p>{{ capitalizedMessage }}</p>
</div>

总结

• Vue 2 中的过滤器是一种方便的工具，用于在模板中格式化文本。
• 过滤器可以在全局或局部定义，并且可以串联使用和传递参数。
• 在 Vue 3 中，过滤器已被移除，建议使用计算属性或方法来替代。

如果你有更多关于 Vue 2 或其他前端技术的问题，欢迎继续提问！