Vue -过滤器

Vue允许自定义过滤器，用作一些常见的文本格式化，过滤器只用在两个地方：mustache插值和v-bind表达式

全局过滤器

Vue.filter ( ' 过滤器名字 ' ，回调函数 )

<body>
<div id="app">
   原msg字符串：{{ msg }} <br>
   过滤后的msg：{{ msg | msgFormat }} <!--通过管道符 | 来使用过滤器，若要传参，msgFormat(arg)，参数可传多个-->
</div>
<script>
     //定义一个Vue的全局过滤器,名字叫做msgFormat
     //回调函数的第一个参数是管道符前面传递的数据，若上面有参数传来，接收即可，function(data,arg)
     Vue.filter('msgFormat',function (data) {
         return data.replace(/*/g,'')
     })

    var vm = new Vue({
        el: '#app',
        data: {
            msg:'*H*e*l*l*o*'
        }
    })
</script>
</body>

全局过滤器可被所有的vm实例使用

可对同一数据同时使用多个过滤器，依样画葫芦

私有过滤器

在创建vm对象时使用filters属性可为这个实例对象建立私有过滤器

<body>
<div id="app">
   {{ msg | msgFormat }} 
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'*H*e*l*l*o*'
        },
        filters:{
            //定义私有过滤器，过滤器名称:处理函数
            msgFormat:function (data) {
                return data.replace(/*/g,'') 
            }
        }
    })
</script>
</body>

过滤器采用就近原则，如果私有过滤器和全局过滤器重名则优先使用自身的私有过滤器