一、过滤器的介绍
1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。
2、首先我们要知道，Vue中的过滤器不能替代Vue中的mehtods、computed、watch
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。
5、在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。
6、在Vue 2.0中已经没有内置的过滤器了，我们可以自定义过滤器。
二、定义和使用过滤器
使用Vue,可以有两种不同的方式注册过滤器（全局过滤器和本地过滤器），你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用。注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。
【1】全局过滤器
来看一个简单的示例，其作用是将单词第一个字母转成大写字母
// 声明一个全局的过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
【2】本地过滤器
本地过滤器存储在Vue组件中，作为filters属性中的函数。这个时候你想注册多少个就能注册多少个
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
【3】过滤器的使用
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器函数总接收表达式的值 作为第一个参数。在下述例子中，capitalize过滤器函数将会收到name的值作为第一个参数，formaId过滤器函数将会收到rowId的值作为第一个参数。
<!-- 在双花括号中 -->
<h1>{{ name | capitalize }}</h1>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rowId | formatId"></div>
【4】hello通过capitalize过滤器后展示到页面的是Hello
三、过滤器串联
过滤器可以串联，使用管道（|）符号将多个过滤器进行串连，并通过这一系列过滤器转换成一个值。
在下面这个例子中，表达式name的值将作为参数传入到filterA函数中。然后继续调用过滤器函数filterB，将filterA的过滤结果作为参数传递到filterB中，最终得到过滤后的结果展示到h1标签元素
<h1>{{ name | filterA | filterB }}</h1>
让我们再看一个价格的例子，并让这个价格只保留两位小数，然后加上美元符号。
<div id="app">
<h1>{{ price | toFixed(2) | toUSD}}</h1>
</div>
// 过滤器
filters: {
toFixed: function (price, limit) {
return price.toFixed(limit)
},
toUSD: function (price) {
return `$${price}`
}
}
四、添加参数
正如前面提到过的，过滤器可以根据你需要添加一些参数进来。Vue将被过滤的值作为第一个参数，后缀作为第二个和第三个参数。
下述例子中，toFixed 被定义为接收两个参数的过滤器函数。其中price的值作为第一个参数，limit作为第二个参数
<div id="app">
<h1>{{ price | toFixed(2) }}</h1>
</div>
// 过滤器
filters: {
toFixed: function (price, limit) {
return price.toFixed(limit)
},
}
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
网友评论