vue全局过滤器的基本使用_vue-全局过滤器的基本使用-简书-CSDN博客

本文链接：https://blog.csdn.net/qmz18778391913/article/details/99479497

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="home">
            <!-- 两个过滤器，则一层层执行 -->
            <span>{{ msg }}</span></br>
            <span>{{ msg | msgFilter('乱葬岗') | msgFilter2}}</span>
        </div>
    </body>
    <script>
        //全局定义filter过滤器，名字叫做'msgFilter'，可带参数可不带参数
        // Vue.filter('msgFilter', function(massage){
        //     massage.replace('云深不知处', '乱葬岗');
        // })
        Vue.filter('msgFilter', function(massage,param){
            return massage.replace('云深不知处', param);
        })
        Vue.filter('msgFilter2', function(massage){
            return massage.replace('蓝湛', '魏无羡');
        })
    var vm =  new Vue({
        el:'#home',
        data(){
            return{
                msg:'我想带一人回云深不知处，带回去，藏起来-----蓝湛'
            }
        }
    })
    </script>
</html>