过滤器有两类： 全局过滤器 和 局部过滤器

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

一、全局过滤器

创建过滤器 ：
在newVue之前
步骤
1、在newVue之前 Vue.filter(‘过滤器名字’,function( ){ }) 定义过滤器
2、在过滤器的函数中 实现具体的格式处理function( v ){ }
v是当前过滤器的调用者 被处理的数据 自带参数

  <div id="app">
    过滤之前的：{{msg}}<br>
    过滤之后的：{{msg|toUpper}}
  </div>
  =======================================================
  <div id="app1">
    {{str|toUpper}}
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.filter('toUpper',(v)=>{
      // v其实就是msg ->"abc"
      // v是自带参数 不需要我们传入
      // charAt() 取出下标为0的字符
      // substr() 截取字符串
      return v.charAt(0).toUpperCase() + v.substr(1)
    })
    var vm = new Vue({
      el:"#app",
      data:{
        msg:"abc"
      }
    });
    var vm = new Vue({
      el:"#app1",
      data:{
        str:"xyz"
      }
    });
  </script>

二、局部过滤器

选项 filters
不要忘记s
1、通过选项filters定义过滤器 filters:{过滤器名字：function(){}}
2、function(v){return 处理的结果}
3、在视图中

<div id="app">
    {{msg|toUpper}}
  </div>
  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el:"#app",
      data:{
        msg:"abc"
      },
      filters:{
        toUpper(v){
          return v.charAt(0).toUpperCase()+v.substr(1);
        }
      }
    });
  </script>

三、过滤器-传参数和串联使用

1. 传参数
   {{msg|过滤器名字(自己的参数)}} ->(x,y) =>{y指的时自己传的参数}
2. 串联使用
   {{被处理的数据count |过滤器A| 过滤器B}}
   注意：过滤器A处理的数据是count
   过滤器B处理的是过滤器A所返回的结果

  <div id="app">
    <!-- 1、传参数 -->
    <!-- {{count|toD('元')}} -->
    
    <!-- 2、串联使用 -->
    {{count|A|C('元')}}
  </div>
  <script>
  
    // 传参数
    Vue.filter('toD',(v,y)=>{
      console.log(v);
      console.log(y);
      return '$' + v + y
    });

    // 串联
    Vue.filter('A',(v)=>{
      return '$' + v
    })
    Vue.filter('C',(v,y)=>{
      console.log(v);
      console.log(y);
      return v+y;
    })

    var vm = new Vue({
      el:"#app",
      data:{
        count:100
      },
      
      filters:{
        
      },
      methods:{

      }
    });
    </script>