vue学习-过滤器

作用:
过滤数据，一般是把服务器返回的数据，过滤成符合页面展示的数据

1.私有过滤器    <div id="app">        <login></login>        <register></register>    </div>     Vue.component('login',{        template:"<span>登录 {{message | toUp('小明')}}</span>",        data:function(){            return {                message : 'hello world'            }        },        filters:{            /**                过滤器是一个函数，必须要传入值，并且必须要有返回值                input 要过滤的原始数据            */            toUp:function(input,name){                return input.toUpperCase()            }        }    })

2.共有过滤器（最好把Vue.filter放在组件注册之前）    Vue.filter('toUp',function(input,name){        return input.toUpperCase()    })    //定义并且注册 登录组件    Vue.component('login',{        template:"<span>登录 {{message | toUp('小明')}}</span>",        data:function(){            return {                message : 'hello world'            }        }    })    //定义并且注册 注册组件    Vue.component('register',{        template:"<span>注册 {{message | toUp('小红')}}</span>",        data:function(){            return {                message : 'hello girl'            }        }    })    //根实例(对象)    var vm = new Vue({        el:'#app'    })

私有和全局的区别
私有过滤器：只在该组件起作用

全局过滤器：所有的组件中都起作用
Vue.filter(‘过滤器的名称’,处理函数)

注意点:
1、过滤器是一个函数，必须要传入值，并且必须要有返回值
2、最好把Vue.filter放在组件注册之前