3.filter

在 Vue.js 中，过滤器（Filters）是一种用来处理文本输出的简便方式。它可以用于在模板中对数据进行一些常见的文本格式化操作，例如大小写转换、日期格式化等。

你可以通过全局注册过滤器或局部注册过滤器，然后在模板中使用它们。以下是一些基本用法：

全局过滤器：

在全局注册的过滤器可以在整个应用中的任何模板中使用。

// main.js
import Vue from 'vue';

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

然后在模板中使用：

<template>
  <div>
    {{ message | uppercase }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

局部过滤器：

在组件内部注册的过滤器只能在该组件的模板中使用。

vueCopy code
<template>
  <div>
    {{ message | uppercase }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  filters: {
    uppercase(value) {
      if (!value) return '';
      return value.toUpperCase();
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 uppercase 的过滤器，它将文本转换为大写。在模板中使用 ，会将 message 的值应用到 uppercase 过滤器中，从而实现文本的大写转换。

需要注意的是，过滤器的使用是在双花括号插值表达式中。过滤器可以串联使用，例如 。在这个例子中，reverse 过滤器将字符串反转。