Vue， 过滤器
过滤器替换需要替换的信息
一次可以使用多个过滤器
过滤器可以把需要传的值写在{{ 'name'，nameopm（'需要传的值'） }}里
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js"></script> 8 <body> 9 <div id="app"> 10 <p>{{ msg | msgFormat | test}}</p> 11 <p>{{ msg1 | msgFormat1('疯狂') }}</p> 12 <p>{{ msg2 | msgFormat2('疯狂+1','123') }}</p> 13 </div> 14 </body> 15 </html> 16 <script> 17 18 //定义一个Vue 全局过滤器, 名字叫做 msgFormat 19 Vue.filter('msgFormat', function(msg){ 20 // 字符串 replace 方法, 第一个参数, 除了可写一个 字符串之外, 还可以定义一个正则 21 // return msg.replace('单纯', '邪恶') 22 return msg.replace(/单纯/g, '邪恶') 23 }) 24 25 // 疯狂 传到 arg 代替单纯 26 Vue.filter('msgFormat1', function(msg1, arg){ 27 return msg1.replace(/单纯/g, arg) 28 }) 29 30 31 //过滤器可以放多个参数,如 arg + arg2 进行拼接 32 Vue.filter('msgFormat2', function(msg2, arg, arg2){ 33 return msg2.replace(/单纯/g, arg + arg2) 34 }) 35 36 //可以调用多个过滤器 37 Vue.filter('test', function(msg) { 38 return msg + '========' 39 }) 40 41 42 var vm = new Vue({ 43 44 //创建 Vue 实例,得到 ViewModel 45 el:'#app', 46 data:{ 47 msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人', 48 msg1:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人', 49 msg2:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人' 50 }, 51 methods:{ 52 53 } 54 }) 55 </script> 56 <!-- 过滤器调用的格式 {{ name | nameope}} 再调用name 之前先调用nameope 进行处理 -->
效果图
2019-06-14 14:08:08