QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

vue教程

vue的过滤器

 admin  2022-09-01 22:49:23
过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方: 插值表达式 和 v-bind属性绑定

过滤器定义语法示例:
  1. filters: { 
  2. //注意: 过滤器函数形参中的val 永远都是"管道符"前面的那个值 
  3. capi(val) { 
  4.   //过滤器中一定要有一个返回值(return) 
  5.   //字符串有个 charAt 方法 这个方法接受索引值 表示从字符串中把索引对应的字符获取过来 
  6.   const first = val.charAt(0).toUpperCase() 
  7.   //字符串的 slice 方法 可以截取字符串 从指定索引往后截取 
  8.   const other = val.slice(1) 
  9.   //拼接字符串 
  10.   return first + other; 
注意:

要定义到 filters 节点下,本质是一个函数
在过滤器函数中,一定要有一个返回值(return)
在过滤器的形参中,就可以获取到"管道符"前面待处理的值
如果全局过滤器和私有过滤器名字一致,则按照"就近原则",调用的是私有过滤器


过滤器应该被添加在 JavaScript 表达式的尾部,由 "管道符" 进行调用,示例代码如下:
  1. <!-- 在 "{{}}" 中通过"管道符"调用 capitalize 过滤器,对 message 的值进行格式化 --> 
  2. <p>{{ message | capitalize }}</p> 
  1. <!-- 在 "v-bind" 中通过"管道符"调用 formatId 过滤器,对 rawId 的值进行格式化 --> 
  2. <div v-bind="rawId | formatId"></div> 
私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,成为"私有过滤器",因为它只能在当前vm实例所控制的el区域内使用

如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:
  1. //全局过滤器 - 独立于每个 vm 实例之外 
  2. //Vue.filter() 方法接受两个参数: 
  3. //    第一个参数: 全局过滤器的名字 
  4. //    第二个参数: 全局过滤器的"处理函数" 
  5. Vue.filter('capitalize', (str) => { 
  6.     return str.charAt(0).toUpperCase() + str.slice(1) + '~~' 
  7. }) 

连续调用多个过滤器
过滤器可以串联的进行调用,例如:
  1. <!-- 把 message 的值 交给 filterA 进行处理 --> 
  2. <!-- 把 filterA 处理的结果 交给 filterB 进行处理 --> 
  3. <!-- 把 filterB 处理的结果 作为最终值渲染到页面上 --> 
  4. {{ message | filterA | filterB }} 

过滤器传参
过滤器的本质是JavaScript函数,因此可以接收参数,格式如下:
  1. <!-- arg1 和 arg2 是传递给 filterA的参数 --> 
  2. <p>message的值是: {{ message | filterA(arg1, arg2) }}</p> 
//过滤器处理函数的形参列表中
//    第一个参数: 永远都是:管道符"前面待处理的值
//    从第二个参数开始 才是调用过滤器时传递过来的 arg1 和 arg2 参数

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《vue的过滤器》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/frame/vue/904.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序