vue filters过滤器
2018-03-07 23:48 龙恩0707 阅读(561) 评论(0) 编辑 收藏 举报vue filters过滤器
vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式。最常见的就是双花括号插值。
比如如下代码:
{{message | filters2 | filters3(true, priceCount)}}
过滤器函数filters2接收到的第一个参数就是message的值,message的值将作为参数传入到filter2函数中,然后继续调用同样被定义为接收单个参数的
过滤器函数,因此filter3的第一个参数也是message的值,第二个参数是true,第三个参数是 priceCount.
代码如下:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> </style> </head> <body> <div id="app"> {{message | filters2 | filters3(true, priceCount)}} </div> </body> <script src="./vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 100, priceCount: .8 }, filters: { filters2: function(arg) { console.log("arg: " +arg); if (arg > 90) { return arg - 8; } else { return arg; } }, filters3: function(arg1, arg2, arg3) { var res; console.log("arg1: "+arg1); console.log("arg2: "+arg2); console.log("arg3: "+arg3); if (arg2) { res = (arg1 * 10 * arg3) / 10; console.log("result"+res); return res; } else { res = arg1; console.log("result"+res); return res; } } } }) </script> </html>