学习vue第七节,filter过滤器如何的使用
vue 过滤器如何的使用
1.全局过滤器
2.私有过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- 1.过滤选择器基本使用,调用方法,默认传参msg {{name | 过滤选择器名称}} --> <p>{{msg | msgFormat1}}</p> <!-- 过滤选择器 可以传自己的参数--> <p>{{msg | msgFormat2("b")}}</p> <!-- 过滤选择器 可以多次调用--> <p>{{msg | msgFormat2("b") | other}}</p> </div> <script type="text/javascript"> // 全局过滤选择器 ,msg 默认传过来的参数 Vue.filter("msgFormat1",function(msg){ return msg+"aa" }) Vue.filter("msgFormat2",function(msg,b){ // 可以加正则表达式 /2/g 全局匹配 return msg.replace(/2/g,"a"+b) }) Vue.filter("other",function(msg){ // 调用完msgFormat2 再调用other return msg+" over" }) var vm=new Vue({ el:"#app", data:{ msg:"123412341234" }, methods:{ }, filters:{//定义 私有过滤器 msgFormat1:function(msg){//同样的过滤器msgFormat1 优先调用私有过滤器 return `${msg}bb`;//ES6字符串连接方法 } } }) </script> </body> </html>
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/12840473.html