Vue-过滤器

过滤器（Filters） 是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定

使用方法：Vue.filter(“过滤器名字，过滤器的function函数”)

<div id="app">
      <!-- | 叫做管道服务 -->
      <!-- <p>{{message | 过滤器}}</p> -->
      <p>{{message | capt}}</p>
      <p>{{info | capt}}</p>
    </div>

 <script>
    // Vue.filter("过滤器名字，过滤器的function函数");
    Vue.filter("capt", function (val) {
      // 必须return一个处理结果
      // return "abc";
      // 1.把val首字母大写
      return val.charAt(0).toUpperCase() + val.slice(1);
    });
    const vm = new Vue({
      el: "#app",
      data: {
        message: "hello vue.js",
        info: "my name",
      },
    });
  </script>

私有过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用

使用方法：

  const vm = new Vue({
      el: "#app",
      data: {
        message: "hello vue.js",
        info: "my name",
      },
      filters: {
        test(val) {
          return val + "11";
        },
      },
    });

公有过滤器

如果希望在多个 vue 实例之间共享过滤器，则可以定义全局过滤器：

  Vue.filter("capt", function (val) {
      return val+'11'
    });

过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数

msg1和msg2 是传递给message的参数
 <p>{{message | capt(msg1.msg2)}}</p>

过滤器的兼容性

在企业级项目开发中：

• 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
• 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能