VUE——全局过滤器的基本使用

过滤器：
Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustachc插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示；

        //过滤器调用时的格式，{{ name | 过滤器名称 }}
        Vue.filter('过滤器名称', function(){})
        //过滤器中的function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据
        Vue.filter('过滤器名称', function(data) {
            return data + '123'
        })

    <div id="app">
        <p>{{ msg | msgFormat }}</p>
    </div>
    <script>
        //定义一个Vue全局过滤器，名字叫msgFormat
        Vue.filter('msgFormat', function(msg) {
            //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则。
            return msg.replace(/好/g,'坏')
        });
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都要把自己照顾好 好到遗憾无法打扰 好好的生活 好好的变老 好好假装我 已经把你忘掉'
            },
            methods: {}
        });
    </script>

    <div id="app">
        <p>{{ msg | msgFormat('坏','123') }}</p>
    </div>
    <script>
        //定义一个Vue全局过滤器，名字叫msgFormat
        Vue.filter('msgFormat', function(msg, arg, arg2) {
            //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则。
            return msg.replace(/好/g, arg + arg2)
        });
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都要把自己照顾好 好到遗憾无法打扰 好好的生活 好好的变老 好好假装我 已经把你忘掉'
            },
            methods: {}
        });
    </script>

    <div id="app">
        <p>{{ msg | msgFormat('坏','123') | test }}</p>
    </div>
    <script>
        //定义一个Vue全局过滤器，名字叫msgFormat
        Vue.filter('msgFormat', function(msg, arg, arg2) {
            //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则。
            return msg.replace(/好/g, arg + arg2)
        });
        Vue.filter('test', function (msg){
            return msg + '======'
        })
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我们都要把自己照顾好 好到遗憾无法打扰 好好的生活 好好的变老 好好假装我 已经把你忘掉'
            },
            methods: {}
        });
    </script>