在Vue中定义和调用过滤器的方法

 更新时间:2023年09月15日 11:48:59   作者:传智教育  
过滤器(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调用过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅析Vue 中的 render 函数

    浅析Vue 中的 render 函数

    在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM,今天小编就通过本文给大家简单介绍下Vue 中 render 函数,需要的朋友可以参考下
    2020-02-02
  • vue通过笛卡儿积实现sku库存配置方式

    vue通过笛卡儿积实现sku库存配置方式

    这篇文章主要介绍了vue通过笛卡儿积实现sku库存配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3路由配置以及路由跳转传参详解

    vue3路由配置以及路由跳转传参详解

    路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于vue3路由配置以及路由跳转传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue使用Swiper踩坑解决避坑

    vue使用Swiper踩坑解决避坑

    这篇文章主要为大家介绍了vue使用Swiper踩坑及解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue系列之requireJs中引入vue-router的方法

    vue系列之requireJs中引入vue-router的方法

    这篇文章主要介绍了vue系列之requireJs中引入vue-router的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解基于mpvue的小程序markdown适配解决方案

    详解基于mpvue的小程序markdown适配解决方案

    本篇文章主要介绍了详解基于mpvue的小程序markdown适配解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 将VUE项目部署到服务器的详细步骤

    将VUE项目部署到服务器的详细步骤

    经过一段时间的探索,前端后端都有大致的样子了,下面就是部署到服务器,这篇文章主要给大家介绍了关于将VUE项目部署到服务器的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue实现公共组件传值并及时监听到数据更新视图

    vue实现公共组件传值并及时监听到数据更新视图

    这篇文章主要介绍了vue实现公共组件传值并及时监听到数据更新视图方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue3.x使用mitt.js进行组件通信

    Vue3.x使用mitt.js进行组件通信

    Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js。本文就介绍一下mitt.js的具体使用方法,感兴趣的可以了解一下
    2021-06-06
  • vue路由权限和按钮权限的实现示例

    vue路由权限和按钮权限的实现示例

    本文主要介绍了vue路由权限和按钮权限的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04

最新评论