十分钟带你读懂Vue中的过滤器
一、什么是过滤器
过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的，因为它所实现的功能也能用计算属性或者函数调用的方式来实现。
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
二、过滤器声明与使用
过滤器应该被添加在JavaScript 表达式的尾部，由“管道符”进行调用。
过滤器可以用在两个地方：插值表达式和v-bind 属性绑定。
示例：
在 {{ }} 中，通过管道符 " | " 调用 capitalize() ，对message进行格式化。
<p>{{ message | capitalize }}</p>
在 v-bind中，通过管道符 " | " 调用 formatId() ，对rawId进行格式化。
<div v-bind:id="rawId | formatId"></div>
在创建 vue 实例期间，可以在 filters 节点中定义过滤器
示例：
const vm = new Vue({
el: '#app',
data: {
...
},
filters: {
capitalize(str) {
// 编写过滤的逻辑，即对入参str的处理
return ...;
}
}
})
完整案例
<div id="app">
<p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
filters: {
capitalize(str) {
// 第一个字母大写，slice(1) 拼接上下标为1之后的字母
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
</script>输出结果
Hello vue.js
str.charAt(0).toUpperCase()：表示取下标为0的字母，并将其转为大写。
str.slice(1)：表示从str中提取第2个字符到最后的字符，并返回新字符串。
三、Vue过滤器的分类
1.按照作用范围分类
按照作用范围分类，可以分为全局过滤器和局部过滤器
（1）全局过滤器：通过Vue.filter()方法定义的过滤器，在整个应用程序中都可以使用。
（2）局部过滤器：在Vue组件选项中通过filters属性定义的过滤器，只能在该组件及其子组件中使用（就是上述的案例代码）。
示例代码
<div id="app1">
<p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<div id="app2">
<p>{{abc | capitalize}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
})
</script>
<script>
const vm1 = new Vue({
el: '#app1',
data: {
message: 'hello vue.js',
info: 'title info',
},
// 私有过滤器，只能被当前 vm 所控制的区域所使用
filters: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
},
})
</script>
<script>
const vm2 = new Vue({
el: '#app2',
data: {
abc: 'abc'
}
})
</script>运行结果
上述代码的含义大致是：
2.按照使用方式分类
按照使用方式分类，可以分为普通过滤器和带参数过滤器
（1）普通过滤器：不带参数的过滤器，可以对数据进行简单的格式化或转换，例如将字符串转换为大写形式，将数字格式化为货币格式等。
这个也就是我们上述代码的例子。
（2）带参数过滤器：带有一个或多个参数的过滤器，可以根据参数的不同实现不同的功能，例如根据参数过滤数组，根据参数指定日期格式等。
除此之外，Vue.js的过滤器还可以按照数据类型进行分类，例如针对字符串、数字、日期、数组等不同的数据类型，提供了不同的过滤器实现。
具体示例请看第五点。
四、连续调用多个过滤器
过滤器可以串联地进行调用
格式
{{message|filterA|filterB|filterC}}
- 把message的值交给filterA进行处理
- 把filterA处理的结果，再交给filterB进行处理
- 把filterB处理的结果，再交给filterC进行处理
- 最后把filterC处理的结果作为最终的值渲染到页面上
说白了，就是将前者过滤后的值交给后者过滤，直至最后一个！
完整示例代码
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局过滤器
// 首字母转大写的过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定义控制文本长度的过滤器
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 10) + '...'
})
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
</script>运行结果
Hello vue....
五、过滤器传参
过滤器的本质是 JavaScript 函数，因此可以接收参数
格式如下
<p>{{ message | filterA(arg1, arg2)}}</p>
Vue.filter('filterA', (msg, arg1, arg2) => {
// 过滤器逻辑代码
})
参数解析
第一个参数：永远都是“管道符”前面待处理的值
从第二个参数开始，才是调用过滤器时传递过来的arg1参数 和 arg2参数
完整示例代码
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局过滤器
// 首字母转大写的过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定义控制文本长度的过滤器
Vue.filter('maxLength', (str, len = 10) => {
if (str.length <= len) return str
return str.slice(0, len) + '...'
})
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
</script>运行结果
Hel...
六、过滤器的兼容性问题
过滤器仅在vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中
如果使用的是2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
以上就是十分钟带你读懂Vue中的过滤器的详细内容，更多关于Vue过滤器的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue 中可以定义组件模版的几种方式以及他们之间的一些差别，需要的朋友可以参考下2019-08-08
在使用服务器端渲染时，除了服务端的接口缓存、页面缓存、组建缓存等，浏览器端也避免不了要使用缓存，减少页面的重绘。这篇文章主要介绍了详解vue服务端渲染浏览器端缓存（keep-alive），感兴趣的小伙伴们可以参考一下2018-10-10
日历在很多地方都可以使用的到，这篇文章主要介绍了如何利用vue3实现简单的日历控件，文中通过示例代码讲解详细，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案:,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了Vue实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue.js每天必学之内部响应式原理探究，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了Vue使用axios发送请求并实现简单封装,主要包括安装axios及简单使用配置方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
随着前端大屏页面的逐渐壮大,客户的...其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8,下面这篇文章主要给大家介绍了关于vue播放flv、m3u8视频流(监控)的相关资料,需要的朋友可以参考下2023-04-04
下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论