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>
