声明： 本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。
简介：
Vue2.x允许我们自定义过滤器，用来过滤模型数据，在显示之前对数据进行筛选、处理等操作。过滤器可分为全局过滤器和局部(本地)过滤器。
注：Vue1.x存在一些内置的过滤器，但是在Vue2.x时，这些内置的过滤器被取消掉了；如果需要使用过滤器，那就只有靠我们自己定义了。
自定义全局过滤器(示例)：
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue - 过滤器</title> <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script> <script> // 定义全局过滤器(示例) Vue.filter('filterId', function (value) { if (!value) { return ''; } value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }); window.onload = function () { let vm = new Vue({ el: '#myId', data: { msg: 'just do it!' } }); } </script> </head> <body> <div id="myId"> <h4>使用全局过滤器前:</h4> <p>{{msg}}</p> <input type="button" v-bind:value="msg"> <br /> <h4>使用全局过滤器后:</h4> <!-- 用法一: 与{{}}搭配使用 --> <p>{{msg | filterId}}</p> <!-- 用法二: 与v-bind搭配使用--> <input type="button" v-bind:value="msg | filterId"> </div> </body> </html> - 效果：
![在这里插入图片描述]()
自定义局部(本地)过滤器(示例)：
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue - 过滤器</title> <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { let vm = new Vue({ el: '#myId', data: { msg: 'just do it!' }, // 定义局部(本地)过滤器(示例) filters: { filterId: function (value) { if (!value) { return ''; } value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); } } }); } </script> </head> <body> <div id="myId"> <h4>使用全局过滤器前:</h4> <p>{{msg}}</p> <input type="button" v-bind:value="msg"> <br /> <h4>使用全局过滤器后:</h4> <!-- 用法一: 与{{}}搭配使用 --> <p>{{msg | filterId}}</p> <!-- 用法二: 与v-bind搭配使用--> <input type="button" v-bind:value="msg | filterId"> </div> </body> </html> - 效果：
![在这里插入图片描述]()
局部过滤器优先：
当存在相同id的全局过滤器和局部过滤器时，局部过滤器优先。
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue - 过滤器</title> <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script> <script> // 定义过滤器id为filterId的 全局过滤器 Vue.filter('filterId', function (value) { if (!value) { return ''; }; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }); window.onload = function () { let vm = new Vue({ el: '#myId', data: { msg: 'just do it!' }, // 定义过滤器id为filterId的 局部过滤器 filters: { filterId: function (value) { if (!value) { return ''; }; value = value.toString(); return value + "我是一只小小小小鸟~"; } } }); } </script> </head> <body> <div id="myId"> <p>{{msg | filterId}}</p> </div> </body> </html> - 效果：
![在这里插入图片描述]()
过滤器的用法({{}}与v-bind)：![在这里插入图片描述]()
提示： 过滤器与v-bind搭配使用的用法，从Vue2.1.0+版本才开始支持。
多参数的过滤器：
过滤器的第一个参数值，默认接收的是Vue动态绑定的数据；如果需要其它的参数，那么需要显示传值。
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue - 过滤器</title> <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { let vm = new Vue({ el: '#myId', data: { msg: 9 }, filters: { // 过滤器中, 第一个参数，默认是 动态绑定的数据 filterA: function (value) { return value + 1; }, /* * 如果需要其它的参数, 那么还需在形参这里额外定义 */ filterB: function (value, additionalParamOne) { return (value + 1) * additionalParamOne; } } }); } </script> </head> <body> <div id="myId"> <p>msg 结果为: {{msg}}</p> <!-- 只有一个参数的过滤器，可直接使用过滤器id即可(即: 首参数可不写，是默认的) --> <p>msg | filterA 结果为: {{msg | filterA}}</p> <!--当有多个参数时, 首参数不写, 需要写其它的参数 --> <p>msg | filterB(10) 结果为: {{msg | filterB(10)}}</p> </div> </body> </html> - 效果：
![在这里插入图片描述]()
多过滤器搭配使用：
当对同一个数据对象使用多个过滤器时，那么这些过滤器会挨个挨个执行，上一个过滤器的结果，会作为下一个过滤器的第一个参数对象。
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue - 过滤器</title> <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { let vm = new Vue({ el: '#myId', data: { msg: 9 }, // 定义局部(本地)过滤器(示例) filters: { filterA: function (value) { return value + 1; }, filterB: function (value, additionalParamOne) { return value * additionalParamOne; }, filterC: function (value, additionalParamOne, additionalParamTwo) { return additionalParamOne + value + additionalParamTwo; } } }); } </script> </head> <body> <div id="myId"> <p>msg 结果为: {{msg}}</p> <p>msg | filterA 结果为: {{msg | filterA}}</p> <p>msg | filterA | filterB(10) 结果为: {{msg | filterA | filterB(10)}}</p> <p>msg | filterA | filterB(10) | filterC("恋爱", "分百") 结果为: {{msg | filterA | filterB(10) | filterC("恋爱", "分百")}}</p> </div> </body> </html> - 效果：
![在这里插入图片描述]()
^_^ 如有不当之处，欢迎指正
^_^ 学习整理自
https://cn.vuejs.org/v2/guide/filters.html
^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng