vue2.0 自定义过滤器（filter）实例
一、过滤器简介
（1）过滤器创建
过滤器的本质 是一个有参数 有返回值的方法
| 1234567 | new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } }}) |
（2）过滤器使用
语法：
| 1 | <any>{{表达式 | 过滤器}}</any> |
举个例子：
| 1 | <h1>{{price | myCurrency}}</h1> |
（3）过滤器高级用法
在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。
①如何给过滤器传参？
| 1 | <h1>{{price | myCurrency("￥",true)}}</h1> |
②如何在过滤器中接收到？
| 12345678910 | new Vue({ filters:{ //myInput是通过管道传来的数据 //arg1在调用过滤器时在圆括号中第一个参数 //arg2在调用过滤器时在圆括号中第二个参数 myCurrency:function(myInput,arg1,arg2){ return 处理后的数据 } }}) |
二、封装 自定义过滤器
filters.js
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346 | /** * 自定义过滤器 */import Vue from "vue" /** * 制保留2位小数 * 例如：2，会在2后面补上00.即2.00 */Vue.filter("toDecimal2", x => { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x * 100) / 100; var s = f.toString(); var rs = s.indexOf("."); if (rs < 0) { rs = s.length; s += "."; } while (s.length <= rs + 2) { s += "0"; } return s;}); /** * 获取两位小数部分 * 例如：11.05，返回 "05" * 如果是整数，返回 "00" */Vue.filter("getDecimalPart", x => { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x * 100) / 100; var s = f.toString(); var rs = s.indexOf("."); if (rs < 0) { rs = s.length; s += "."; } while (s.length <= rs + 2) { s += "0"; }
|
