如何在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文章来源地址https://www.toymoban.com/news/detail-701086.html

到了这里,关于如何在Vue中定义和调用过滤器?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-过滤器

    vue允许定义过滤器,对于一些文本常见格式化。过滤器可以用在两个地方 -(1)v-bind 表达式 -(2){{}}插值表达式 使用:使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = \\\"xxx | 过滤器名\\\" 注册:Vue.filter(name,callback) 或 new Vue{filters:{}}   (1)filters和methods配置方法是一样的,在过滤

    2023年04月15日
    浏览(37)
  • Vue过滤器基本使用

    在Vue 2中,你可以使用 filters 选项来定义过滤器。以下在组件中定义和使用过滤器的简单例子: 1、app.vue 使用methods实现: 2、使用filters配合computed计算属性实现: 3、引入其他组件FilterFix.vue实现: app.vue FilterFix.vue main.js

    2024年02月09日
    浏览(51)
  • Vue3 之 过滤器

    过滤器本质上是一个函数,与自定义指令类似。         全局过滤器      局部过滤器 案例:将字符串首字母转换为大写字母的全局过滤器  如果换成局部过滤器   注意: 当全局过滤器和局部过滤器重名,会采用局部过滤器 与自定义命令一样,全局过滤器可以在任何

    2024年02月05日
    浏览(37)
  • 【Vue】收集表单数据 过滤器

    收集表单数据: 若: input type=\\\"text\\\"/ ,则v-model收集的是value值,用户输入的就是value值 若: input type=\\\"radio\\\"/ ,则v-model收集的是value值,且要给标签配置value值 若: input type=\\\"checkbox\\\"/ 1.没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值) 2.配置input的value属性:

    2023年04月18日
    浏览(49)
  • Vue 中过滤器 filter 使用教程

    1.1 过滤器使用的背景    过滤器 提供给我们的一种 数据处理方式 。过滤器功能不是必须要使用的,因为它所实现的功能也能用 计算属性 或者 函数调用 的方式来实现。   例如我们要在页面显示格式化的时间样式,如图所示:下面三种格式化的时间格式都是由 时间戳

    2024年02月07日
    浏览(39)
  • Vue过滤器(时间戳转时间)

    目录 过滤器  HTML写法: 定义过滤器:  定义全局过滤器: 过滤器串联:  带参数过滤器: 时间戳转时间 官方地址:过滤器 — Vue.js (vuejs.org) 过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤, 经常用于格式化文本,比如字母的大写、货币的千位

    2024年02月13日
    浏览(34)
  • VUE L 表单数据&过滤器 ⑨

    提示:以下是本篇文章正文内容 简介 : Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支

    2024年02月10日
    浏览(50)
  • Vue.set()方法+收集表单数据+过滤器

    目录 收集表单数据 过滤器 给对象追加一个属性: Vue.set(对象,‘追加属性名’ ,\\\'追加属性值\\\') this.$set(对象,‘追加属性名’ ,\\\'追加属性值\\\') 注⚠️:对象不能是vue实例,或者vue实例的根数据对象    例子: 总结: 若:input type=\\\'text\\\' /,则v-model收集的是value值,用户输入的就

    2024年02月05日
    浏览(38)
  • Vue2中过滤器的用法详解

    目录 一、过滤器的概念 二、过滤器的使用位置 三、过滤器的分类 1、全局过滤器 2、本地过滤器 四、过滤器应用实例 1、使用过滤器实现省略号 2、使用过滤器处理时间戳 五、Vue3中已废弃过滤器  过滤器 是vue中的一个特性,作用是用于对文本进行格式化的作用。分为全局过

    2024年02月07日
    浏览(39)
  • Spring-Cloud-Gateway如何自定义路由过滤器?

    遇到这么一个面试题:自定义网关过滤器实现把url中的请求参数放到http的header中传递给微服务。 我们知道网关的一个重要的作用就是路由转发,路由表的配置大概是这个样子: 其中的filters就是配置的路由过滤器,Spring已经内置了31个路由的过滤器,这些过滤器都是 org.spring

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包