Vue2教程 - 7 过滤器

过滤器的主要作用是可被用作一些常见的文本格式化。

过滤器可以用在两个地方：插值表达式和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符 | 指示。 Vue.js 允许你自定义过滤器。

举个栗子：

<p>{{ msg | msgFormat('牛逼')}}</p>

上面的内容是使用插值表达式输出一个 msg ，后面使用 | 连接了一个过滤器，在显示 msg 之前， 会先调用过滤器，最终会显示过滤器返回的内容，上面的 msgFormat 是过滤器的名称，() 中是过滤器的参数。

定义过滤器有两种方式：

• 全局过滤器：在一个地方定义，其他所有地方都可以使用。
• 私有过滤器：只能在定义它们的组件内部使用。

下面来学习一下如何定义过滤器。

1 全局过滤器

全局过滤器通过Vue.filter()方法定义，定义后，它们将在整个Vue应用中可用。

举个栗子：

<!-- 结构 -->
<template>
  <!-- 过滤器的使用 -->
  <div id="app">
    <!-- msg在显示之前会调用过滤器，最终会输出过滤器返回的内容 -->
    <p>{{ msg | msgFormat('牛逼') }}</p>
    <!-- 过滤器可以多个一起使用 -->
    <p>{{ msg | msgFormat('牛逼') | test }}</p>
  </div>
</template>

<!-- 脚本 -->
<script>
import Vue from 'vue'

// 定义一个Vue全局的过滤器，名字叫做msgFormat
// 过滤器的方法的第一个参数是规定死的，就是需要处理的原参数，后面的参数可以自己添加
Vue.filter('msgFormat', function (msg, arg) {
  //将字符串中的所有'逗比'替换成传递来的参数
  return msg.replace(/逗比/g, arg)
});

//又定义一个全局过滤器，名称是test
Vue.filter('test', function (msg) {
  //这个过滤器只是在字符串后面添加了一些等号
  return msg + '~~'
});

export default {
  name: 'App',
  data() {
    return {
      msg: '逗比笔记'
    }
  },
}
</script>

在上面的代码中，通过 Vue.filter() 函数定义了两个过滤器，函数的第一个参数是过滤器的名称。第二个参数是一个函数，函数的第一个参数是规定死的，就是需要过滤的原来的内容，后面的参数根据自己需要添加。

多个过滤器可以一起连接使用。上面通过 Vue.filter 添加的过滤器属于全局过滤器，在一个地方定义，其他所有地方都可以使用。

显示效果：

2 私有过滤器

私有过滤器是指在组件中定义的过滤器。全局过滤器和私有过滤器使用的方式是一样的。

当使用过滤器的时候，如果全局过滤器和私有过滤器名称一样，则会使用私有过滤器。

<!-- 结构 -->
<template>
  <!-- 过滤器的使用 -->
  <div id="app">
    <!-- msg在显示之前会调用过滤器，最终会输出过滤器返回的内容 -->
    <p>{{ msg | msgFormat('牛逼') }}</p>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '逗比笔记'
    }
  },
  filters: {
    // 定义私有过滤器
    msgFormat: function (msg, arg) {
      //将字符串中的所有'逗比'替换成传递来的参数
      return msg.replace(/逗比/g, arg)
    }
  }
}
</script>

在Vue 3.x中，官方已经移除了对过滤器的支持，建议使用计算属性（Computed Properties）或方法（Methods）来实现相同的功能。