[TOC] # 过滤器 ***** >[warning]在vue中，将过滤器写在filter中，里面可以有多个过滤方法，在页面结构中，使用 | 进行过滤，上一个过滤器的输出，作为下一个过滤器的输入 <br> ### **局部过滤** ``` <div id="app"> <!-- 过滤器使用 | 进行过滤，上一个过滤器结果作为下一个过滤器的输入--> <p>{{item | formatDate | addStr}}</p> </div> <script> new Vue({ el: '#app', data: { item: '2020/02/14' }, filters: {//过滤 formatDate(val) { // 2020/02/14 -->2020-02-14 // 数组拼接的方式 // split('/') 将字符串以/转换为数组 .join('-') 将数组用-转换为字符串 return val.split('/').join('-'); }, addStr(val){ return '当前时间：' + val; } } }) </script> ``` ### **全局过滤** ``` <div id="app"> <!-- 过滤器使用 | 进行过滤，上一个过滤器结果作为下一个过滤器的输入--> <p>{{item1 | formatDate | addStr}}</p> </div> <div id="app1"> <p>{{item1 | formatDate | addStr}}</p> </div> <script> // 全局过滤器要写在vue实例前 Vue.filter('formatDate',function(val){ return val.replace(/\//g,'-'); }) Vue.filter('addStr',function(val){ return "当前时间：" + val; }) new Vue({ el: '#app', data: { item1: '2020/02/14' }, }) new Vue({ el: '#app1', data: { item1: '2020/05/20' }, }) </script> ```