微信扫一扫打赏支持

VUE课程---20、过滤器

VUE课程---20、过滤器

一、总结

一句话总结：

vue的过滤器有全局过滤器和私有过滤器，过滤器可以过滤一些敏感词汇，也能对时间格式进行过滤。

 

 

1、vue全局过滤器和私有过滤器？

全局过滤器是对所有vue实例都有效的过滤器，语法 Vue.filter(过滤器名称,回调函数)
私有过滤器只对当前vue实例有效，语法filters:{ 过滤器函数 }
<div id="app">
    <!--过滤器可带参数-->
    <!--过滤器可串联-->
    <p>{{msg | msgFormat('-','*') | msgFormat1 | msgFormat2}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
    //全局过滤器
    Vue.filter('msgFormat',function (msg,arg,arg2) {
        return msg.replace(/车/g,arg+arg2);
    });

    Vue.filter('msgFormat1',function (msg) {
        return msg+'============';
    });

    let vm = new Vue({
        el: '#app',
        data: {
            msg: '我怀疑你在开车，而且车速很快，但是我没有证据'
        },
        filters:{//定义私有过滤器
            msgFormat2:function (msg) {
                return msg+'++++';
            }
        }
    });

</script>

 

 

 

2、过滤器使用语法？

{{ 要过滤的字符 | 过滤器 }}：{{msg | msgFormat('-','*') | msgFormat1 }}

 

 

3、过滤器使用注意？

1、过滤器可带参数，例如：{{msg | msgFormat('-','*') | msgFormat1 }}
2、过滤器可串联，例如：{{msg | msgFormat('-','*') | msgFormat1 }}

 

 

4、过滤器使用场景？

比如过滤一些敏感词汇，比如对日期格式串进行处理

 

 

 

二、过滤器

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过滤器</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 
11 过滤器使用语法
12 {{ 要过滤的字符 | 过滤器 }}
13 
14 全局过滤器
15 Vue.filter(过滤器名称,回调函数);
16 
17 私有过滤器
18 filters:{ 过滤器函数 }
19 
20 过滤器使用注意
21 1、过滤器可带参数，例如：{{msg | msgFormat('-','*') | msgFormat1 }}
22 2、过滤器可串联，例如：{{msg | msgFormat('-','*') | msgFormat1 }}
23 
24 
25 过滤器使用场景
26 比如过滤一些敏感词汇，比如对日期格式串进行处理
27 
28 -->
29 <div id="app">
30     <!--过滤器可带参数-->
31     <!--过滤器可串联-->
32     <p>{{msg | msgFormat('-','*') | msgFormat1 | msgFormat2}}</p>
33 </div>
34 
35 <div id="app2">
36     <p>{{msg | msgFormat('-','*') | msgFormat1 }}</p>
37 </div>
38 <script src="../js/vue.js"></script>
39 <script>
40     //全局过滤器
41     Vue.filter('msgFormat',function (msg,arg,arg2) {
42         return msg.replace(/车/g,arg+arg2);
43     });
44 
45     Vue.filter('msgFormat1',function (msg) {
46         return msg+'============';
47     });
48 
49     let vm = new Vue({
50         el: '#app',
51         data: {
52             msg: '我怀疑你在开车，而且车速很快，但是我没有证据'
53         },
54         filters:{//定义私有过滤器
55             msgFormat2:function (msg) {
56                 return msg+'++++';
57             }
58         }
59     });
60 
61     let vm2 = new Vue({
62         el: '#app2',
63         data: {
64             msg: '我怀疑你在开车，而且车速很快，但是我没有证据'
65         }
66     });
67 
68 
69 </script>
70 </body>
71 </html>

 

 

 

 

 

 
posted @ 2020-04-21 15:40  范仁义  阅读(234)  评论(0)  编辑  收藏  举报