过滤器
过滤器分为局部过滤器和全局过滤器。局部过滤器只能在当前组件使用，全局过滤器能在任意地方使用
局部过滤器示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <script> // 局部过滤器只能在当前组件内使用 let App = { data(){ return { "msg": "Hello World" } }, template:` <div>我是App组件。过滤器后的数据：{{ msg | myReverse }} </div> `, // filters 中注册过滤器 filters:{ // 在组件内部注册过滤器，局部过滤器； /* 声明过滤器的语法如下： ‘过滤器的名字‘: function(val){} 使用过滤器的语法如下：利用 管道符 | 要进行过滤的val | ‘过滤器的名字‘ */ myReverse: function (val) { console.log(val); return val.split(‘‘).reverse().join(‘‘) } } } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
浏览器效果示例：
带参数的过滤器：
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <!-- 引入 moment.js 这个插件 --> <script src="./moment.js"></script> <script> let App = { data(){ return { ctm: new Date() } }, // 带参数的过滤器 template:` <div>时间: {{ ctm | myTime(‘YYYY-MM-DD‘) }} </div> `, // filters 中注册过滤器 filters:{ myTime: function (val, formatStr) { return moment(val).format(formatStr) } } } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
浏览器效果示例：
全局过滤器的声明语法：
Vue.filter(‘过滤器的名字‘, function(参数){}) // 全局过滤器的使用方法和局部过滤器是一样的
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <App /> </div> </body> <script src="./vue.js"></script> <!-- 引入 moment.js 这个插件 --> <script src="./moment.js"></script> <script> // 全局过滤器 Vue.filter(‘myTime‘, function (val, formatStr) { return moment(val).format(formatStr) }) let App = { data(){ return { ctm: new Date() } }, // 带参数的过滤器 template:` <div>时间: {{ ctm | myTime(‘YYYY-MM-DD‘) }} </div> `, } new Vue({ el: "#app", data(){ return { } }, components:{ App } }) </script> </html>
end ...
原文：https://www.cnblogs.com/neozheng/p/14311072.html