1.定义：
过滤就是一个数据经过了这个过滤之后出来另一个东西，可以是从中取得你想要的 或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具 过滤器可以用在两个地方：双花括号插值或v-bind表达式
vue中的过滤器分为两种：局部过滤器和全局过滤器
2.代码
<!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"> <ul> <li v-for="item of items"> <span>名称： {{item.name}}</span> <span> - </span> <span>价格： {{item.price | head | foot('***')}}</span> </li> </ul> </div> <script src="js/vue.js"></script> <script> //vue提供的过滤器 Vue.filter('head',(price,flag="$")=>{ return `${flag}` + (price / 100).toFixed(2); }); Vue.filter('foot',(price_two,flag_two='$')=>{ return price_two + `${flag_two}`; }); //对内容(数据),进行二次操作(过滤) let app = new Vue({ el:'#app', data:{ items:[ {id:1, name:'yo',age:'17',price:"300000"}, {id:2, name:'xn',age:'22',price:"500000"}, {id:3, name:'wt',age:'20',price:"600000"} ] } }); </script> </body> </html>3.注意：
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
