Vue2-Vue.filter过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | filterMsg }}

<!-- 在 `v-bind` 中 -->
<div v-bind:msg="message | filterMsg"></div>

过滤器在Vue.js中具有以下功能：

3. 链式调用：可以串联多个过滤器，依次对数据进行处理，形成操作链。如 {{ m | f1 | f2}} 。
4. 接收参数：过滤器可以接收参数，根据参数的不同来实现不同的数据处理逻辑。如 {{ m | f1('v1', 'v2')}} 。
5. 全局和局部定义：可以通过 Vue.filter 或 filters 在全局范围或组件内部定义过滤器，方便在不同组件中复用。
6. 与指令结合：可以与双花括号插值和 v-bind 表达式结合使用，从而实现动态展示经过过滤器处理后的数据。

以下是一个驼峰命名的过滤器示例：

<template>
  <div id="app">
    <el-input v-model="message" style="display: inline-block; width: 20%" />
    <p>Original Message: {{ message }}</p>
    <p>CamelCase Filter Result (Local): {{ message | camelCase }}</p>
    <p>CamelCase Filter Result (Global): {{ message | camelCaseGlobal }}</p>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      message: "hello_world",
    };
  },
  // 使用 filters 定义局部过滤器
  filters: {
    camelCase: function (value) {
      if (!value) return "";
      return value.replace(/[_\s](\w)/g, function (match, letter) {
        return letter.toUpperCase();
      });
    },
  },
};

// 使用 Vue.filter 定义全局过滤器
Vue.filter("camelCaseGlobal", function (value) {
  if (!value) return "";
  return value.replace(/[_\s](\w)/g, function (match, letter) {
    return letter.toUpperCase();
  });
});
</script>