Vue 过滤器filter 的使用

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
过滤器也分为全局过滤和局部过滤
(一):全局过滤器:通过 Vue.filter(‘名称’, 函数) 注册

<div id="box">
    <p v-for='i in data'>{{i|upw}}</p>
     {{age|xxoo}}  //使用方法,在{{ }}内通过"管道符" |
     {{name|pin|xxoo}}  //过滤器可以有多个,从左往右执行
     {{name|xxoo|pin}} 
     <abc></abc>
</div>
<template id="abc">
     <div>
       {{name|pin}}
     </div>
</template>
<script>
     //全局过滤器
     Vue.filter('xxoo',function(da){
            return da.split('').reverse().join('')
            // return "111"
     })
     Vue.filter('pin',function(da){
            return da+'龙哥真帅'
            // return "111"
     })
     Vue.filter('upw',function(da){
            var a  = da.substring(1,da.length)
            var b =  da.substring(0,1).toUpperCase()
            return b+a        
     })
     Vue.component('abc',{
            template:"#abc",
            data(){
                return{
                    name:'王五'
                }
            }
      })
      var VM = new Vue({
            el:"#box",
            data:{
                name:"张三123423423423",
                age:'18',
                data:['zhangsan','lisi','wangwu']
            }
     })
    </script>

使用方法:

	在{{ }}内通过"管道符" |
	过滤器可以有多个,从左往右执行

(二).局部过滤器:在vue组件内通过filters:{名称 : function(){ } }注册

  <div id="box">
        {{age|haha}}
  </div>
  <script>
      var VM = new Vue({
            el:"#box",
            data:{
                name:"张三123423423423",
                age:'18',
                data:['zhangsan','lisi','wangwu']
            },
            filters:{
                haha(da){
                    return da+"哈哈"
                }
            }
      })
    </script>

注意:全局过滤器的 filter 是没有 s 的,而局部过滤器 filters 是有 s 的