Vue过滤器(filter)

过滤器函数，必须被定义到  filter   节点之下

过滤器本质上是函数

语法：

<div id="app">
<p>{{message | capi}}</p>
</div>
<script>
//全局过滤器
//使用   Vue.filter()   定义全局过滤器
Vue.filter('capi',function(str){
   const first=str.charAt(0).toUpperCase();
   const other=str.slice(1);
   return first+other;
  
})




//私有过滤器
    var vm=new Vue({
       el:"#app",
       data:{
        message:"hello vue.js"   
        },
       filters:{
         //注意：过滤器函数形参中的val，永远都是"管道符"前面的那个值
         //强调:过滤器中，一定要有一个返回值
          capi(val){
         // 字符串有  charAt  方法，这个方法接收索引值，表示字符串中把索引对应的字符，获取出来
        const first=val.charAt(0).toUpperCase();
         // 字符串的 slice方法，可以截取字符串，从指定索引往后截取
        const other=val.slice(1);
        return first+other;
       }
     }
    })
</script>

过滤器的注意点：

    要定义到filters节点下，本质是一个函数

    在过滤器函数中，一定要有return值

    在过滤器的形参中，就可以获取到"管道符"前面待处理的那个值

    如果全局过滤器和私有过滤器名字一致，此时就按照"就近原则"，调用的是"私有过滤器"