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>