您的位置：首页 > Web前端 > Vue.js

Vue自定义过滤器

2018-08-13 21:53 423 查看

                    Vue自定义过滤器

定义语法

 

Vue.filter('过滤器名字',function (data) {
   //处理数据的操作
})
-------------------------------------案列一  将以后替换成将来-------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq}}
</div>
</body>
<script>
    /*过滤器的定义语法 第一个参数规定死了  肯定是管道符传过来的数据*/
    Vue.filter('glq',function (data) {
        /*replace 可写一个字符串  还可以写正则表达式*/
        //return data.replace('以后','将来');
        return data.replace(/以后/g,'将来');
    })

    new Vue({
        el: "#app",
        data:{
            mes:"以后的以后你是谁的某某某"
        }
    });
</script>
</html>
-------------------------------------案列一  传参数动态更改修改的文字可以传递多个参数  -------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq('现在')}}
//多个参数在后面加即可glq('现在'，'十年后'，'百年后')

</div>
</body>
<script>
    /*过滤器的定义语法 第一个参数规定死了  肯定是管道符传过来的数据*/
    Vue.filter('glq',function (data,arg) {//多个参数在后面加即可(data,arg,arg1,.....)

        /*replace 可写一个字符串  还可以写正则表达式*/
        //return data.replace('以后','将来');
        return data.replace(/以后/g,arg);
    })

    new Vue({
        el: "#app",
        data:{
            mes:"以后的以后你是谁的某某某"
        }
    });
</script>
</html>

-------------------------------------过滤器可以同时调用多个  定义完成在{{}}添加即可  -------------------------------------------------------
-------------------------------------案列二 -------------------------------------------------------

item.ctime为new date();

pattern 为格式

-------------------------------------私有过滤器-------------------------------------------------------

 定义在组件内部filters

参数可以给默认值 pattern = ' '

 

 



 


 




 

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航