huanggr
什么是过滤器？我们又怎么去使用它？本文我们就来一探究竟！
过滤器的介绍
1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。
2、首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，但有时候他们都可以达到同样的目的
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。
5、在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。
6、在Vue 2.0中已经没有内置的过滤器了，我们可以自定义过滤器。2.0之前有。在这里有一个旧的内置过滤器的
定义和使用过滤器
1.全局和本地过滤器：你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用
一：编辑过滤器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /** * 给商品价格加补0 * @param {*} value */ const addZero=function(value){ var value=Math.round(parseFloat(value)*100)/100; var xsd=value.toString().split("."); if(xsd.length==1){ value=value.toString()+".00"; return value; } if(xsd.length>1){ if(xsd[1].length<2){ value=value.toString()+"0"; } return value; } } export default { addZero } |
二,在入口文件中引入这个filter文件 (路径以你自己的为准)
import filters from ‘../../../static/filter/filter’;
三,在入口文件中全局注册filter
1 2 3 4 | //过滤器统一处理加载 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) |
组件中使用
1 | {{content | addZero}} |
本地过滤器
本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写，本地过滤器存储在Vue组件中，作过filters属性中的函数。这个时候你想注册多少个就能注册多少个：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let app = new Vue({ el: '#app', data () { return { name: 'w3cplus.com' } }, // 声明一个本地的过滤器 filters: { Upper: function (value) { return value.toUpperCase() } } }) <div id="app"> <h1>{{ name | Upper }}</h1> </div> |
过滤器串连、传参
关于过滤器，我最喜欢的一件事是能够使用管道（|）符号对它们进行串连，并通过一系列过滤器转换一个值。让我们再看一个价格的例子，并让这个价格只保留两位小数，然后加上美元符号。虽然我们可以使用一个单独的过滤器来实现它，但我们也可能想要使用toUSD过滤器。在这种情况下，分离和串连过滤器是一处方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Vue.filter('toFixed', function (price, limit) { return price.toFixed(limit) }) Vue.filter('toUSD', function (price){ return `$${price}` }) let app = new Vue({ el: '#app', data () { return { price: 435.333 } } }) <div id="app"> <h1> {{ price | toFixed(2) | toUSD }} </h1> </div> |
传参数时候，过滤器第一位默认是value，也就是说形参第二位才是接收参数。当然，过滤器它的功能仅仅不像文章中的这么简单，他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话，可以阅读@wy-ei在Github上创建的。
7