在Vue中定义和调用过滤器的方法
作者：传智教育
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化，这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：
<l--在双花括号中通过“管道符“调用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: {
message: 'hello vue. js',
info: 'title info'
},
filters: { // 在 filters 节点下定义“过滤器”
capitalize(str) { //把首字母转为大写的过滤器
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
// 全局过滤器-独立于每个vm实例之外
// Vue.filter(）方法接收两个参数：
// 第 1 个参数，是全局过滤器的“名字“
// 第 2 个参数，是全局过滤器的“处理函数“
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})过滤器可以串联地进行调用，例如：
<!--把 message的值，交给filterA 进行处理-->
<!--把filterA处理的结果，再交给filterB进行处理-->
<!--最终把filterB处理的结果，作为最终的值渲染到页面上-->
{{ message | filterA | filterB }}连续调用多个过滤器的示例代码如下：
<！--串联调用多个过滤器-->
<p>{{text | capitalize | maxLength)}</p>
//全局过滤器-首字母大写
Vue.filter('capitalize', (str) => {
return str.charAt(0).tolpperCase() + str.slice(1) + '--'
}）
//全局过滤器 - 控制文本的最大长度
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 11) +'…'
}）过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：
<！-- arg1和 arg2 是传递给 filterA 的参数-->
<p>{{ message | filterA(arg1, arg2) }}</p>
//过滤器处理函数的形参列表中：
// 第一个参数：永远都是”管道符“前面待处理的值
// 从第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg, arg1, arg2) =>{
//过滤器的代码逻辑...
}）过滤器传参，示例代码如下：
<!--调用 maxlength 过滤器时传参-->
<p>{{text | capitalize | maxLength(5)}}</p>
//全局过滤器 - 首字母大写
Vue.filter('capitalize',(str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
//全局过滤器-控制文本的最大长度
Vue.filter('maxLength', (str, len = 10) => {
if (str.length A len) return str
return str.slice(0, len) +'…
}）过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
⚫ 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
⚫ 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：
https://v3.vuejs.org/guide/migration/filters.html#migration-strategy
到此这篇关于如何在Vue中定义和调用过滤器的文章就介绍到这了,更多相关vue调用过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！