首页 > 代码库 > vue28-2.0-过滤器
vue28-2.0-过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ msg:123 } }); }; </script> </head> <body> <div id="box"> {{msg | currency}} <!--没有效果--> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ msg:{a:1,b:2,c:3} } }); }; </script> </head> <body> <div id="box"> {{msg}} <!--不需要{{msg | json}}:{a:1,b:2,c:3}--> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.filter(‘toDou‘,function(n){ //alert(input); return n<10?‘0‘+n:‘‘+n; }); window.onload=function(){ new Vue({ el:‘#box‘, data:{ msg:9 } }); }; </script> </head> <body> <div id="box"> {{msg | toDou}} <!--toDou()参数是msg--> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.filter(‘toDou‘,function(n,a,b){ alert(a+‘,‘+b); //alert(input); return n<10?‘0‘+n:‘‘+n; }); window.onload=function(){ new Vue({ el:‘#box‘, data:{ msg:9 } }); }; </script> </head> <body> <div id="box"> {{msg | toDou ‘12‘ ‘5‘}} </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.filter(‘toDou‘,function(n,a,b){ alert(a+‘,‘+b); //alert(input); return n<10?‘0‘+n:‘‘+n; }); window.onload=function(){ new Vue({ el:‘#box‘, data:{ msg:9 } }); }; </script> </head> <body> <div id="box"> {{msg | toDou(‘12‘,‘5‘)}} </div> </body> </html>
6. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能,自己通过js实现
到了2.0, 内置过滤器,全部删除了
lodash 工具库框架, _.debounce(fn,200)
自定义过滤器——还有
但是,自定义过滤器传参
之前: {{msg | toDou ‘12‘ ‘5‘}}
现在: {{msg | toDou(‘12‘,‘5‘)}}
vue28-2.0-过滤器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。