位置: IT常识 - 正文

Vue--》过滤器介绍及其使用方法(vue.js过滤器)

编辑:rootadmin
Vue--》过滤器介绍及其使用方法

推荐整理分享Vue--》过滤器介绍及其使用方法(vue.js过滤器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端vue过滤器,vue中过滤器有什么作用及详解,vue过滤器可以异步吗,vue.js过滤器,vue过滤器的使用,vue3过滤器,vue3.0过滤器,vue过滤器的使用,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

过滤器

过滤器的兼容性

私有过滤器和全局过滤器

过滤器的连续调用

过滤器进行传参


过滤器过滤器的兼容性

注意:Vue3中明确取消了过滤器这个功能,如果想使用只能在Vue2中进行,如果所做的项目是Vue2的话,可以了解一下这个功能点,至少会使用就行。

在企业级项目开发中:

如果使用的是2.x版本的vue,则依然可以使用过滤器相关功能

如果项目已经升级到了3.x版本的vue,官方建议使用计算属性或方法代替被剔除的过滤器功能,

过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。过滤器应该被添加在JavaScrip表达式的尾部,由“管道符”进行调用,案例如下:

<body> <div id="root"> <p>message的值是:{{message | capi}}</p> </div> <script src="vue.js"></script> <script> const vm = new Vue({ el:"#root", data:{ message:"hello Vue.js" }, //过滤器函数,必须定义到filters节点之下,过滤器本质上是函数 filters:{ //注意:过滤器函数形参中的val,永远都是“管道符”前面的那个值 capi(val){ // console.log(val); // charAt()字符串方法,接收索引值,表示从字符串中把索引值对应的字符获取出来 const first = val.charAt(0).toUpperCase() // slice()字符串方法1,可以截取字符串,从指定索引值往后截取 const other = val.slice(1) //强调:过滤器中一定要有返回值 return first+other } } }) </script></body>Vue--》过滤器介绍及其使用方法(vue.js过滤器)

私有过滤器和全局过滤器

在filters节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前vm实例所控制的el区域内使用。如上面设置的过滤器就是私有过滤器;如果希望在多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:

// 全局过滤器 - 独立于每个 vm 实例之外// Vue.filter() 方法接收两个参数// 第一个参数:是全局过滤器的”名字“// 第二个参数:是全局过滤器的”处理函数“Vue.filter('capi',(str)=>{ return str.charAt(0).toUpperCase() + str.slice(1)})

承接上面的例子我们可以看看全局过滤器和私有过滤器的区别:

<body> <div id="root"> <p>message的值 是:{{message | capi}}</p> </div> <div id="root1"> <p>message的值 是:{{message | capi}}</p> </div> <script src="vue.js"></script> <script> // 提醒大家一下:全局过滤器要放在Vue实例化代码前面,不然会报错 Vue.filter('capi',(str)=>{ // 为了区别全局过滤是否会对私有过滤进行覆盖,将全局过滤加一个特征 return str.charAt(0).toUpperCase() + str.slice(1)+'~~~' }) const vm = new Vue({ el:"#root", data:{ message:"hello Vue.js" }, filters:{ capi(val){ const first = val.charAt(0).toUpperCase() const other = val.slice(1) return first+other } } }) const vm1 = new Vue({ el:"#root1", data:{ message:"hello world" }, }) </script></body>

注意点:

1)要定义到 filters 节点下,本质是一个函数

2)在过滤器函数中,一定要有return值

3)在过滤器的形参中,就可以获取到“管道符”前面待处理的那个值

4)如果全局过滤器和私有过滤器名字一致,按照就近原则,调用的是“私有过滤器”

过滤器的连续调用

过滤器可以串联地进行调用,例如:

//在插值表达式中可以使用多个过滤器如下://过滤器filterA从它前面的message得到的处理结果,将filterA的return返回值再交给filterB进行处理//最终把filterB处理的结果,作为最终的值渲染到页面上<div id="root"> {{message | filterA | filterB}}</div>过滤器进行传参

过滤器本质上是JavaScript函数,因此可以接收参数,格式如下:

<!-- arg1 和 arg2 是传递给 filterA 的参数 --><p>{{ message | filterA(arg1,arg2) }}</p>//过滤器处理函数的形参列表中://第一个参数:永远都是“管道符”前面待处理的值//从第二个参数开始,才是调用过滤器时传递过来的 arg1 和 arg2 参数Vue.filter('filterA',(msg,agr1,arg2)=>{ //过滤器的代码。。。})
本文链接地址:https://www.jiuchutong.com/zhishi/300346.html 转载请保留说明!

上一篇:微信小程序 | 小程序系统API调用(微信小程序小小驯龙师破解版)

下一篇:PyQt5(一) PyQt5安装及配置,从文件夹读取图片并显示,模拟生成素描图像(pyqt5如何安装)

  • 移动硬盘无法读取怎么办(移动硬盘无法读取怎么修复mac)

    移动硬盘无法读取怎么办(移动硬盘无法读取怎么修复mac)

  • 内存的主要特点(计算机内存的主要特点)

    内存的主要特点(计算机内存的主要特点)

  • 苹果平板可以下载小学同步教材吗(苹果平板可以下载爱思助手吗)

    苹果平板可以下载小学同步教材吗(苹果平板可以下载爱思助手吗)

  • 抖音抖一下不成功(怎么抖音不行呢)

    抖音抖一下不成功(怎么抖音不行呢)

  • 淘宝采集是什么(淘宝采集器有什么用)

    淘宝采集是什么(淘宝采集器有什么用)

  • 华为平板可以插手机卡吗(华为平板可以插耳机吗)

    华为平板可以插手机卡吗(华为平板可以插耳机吗)

  • 淘宝经验是什么意思(淘宝经验是自己发的吗)

    淘宝经验是什么意思(淘宝经验是自己发的吗)

  • 华为手机悬浮球怎么设置功能(华为手机悬浮球怎么去掉)

    华为手机悬浮球怎么设置功能(华为手机悬浮球怎么去掉)

  • 充电宝可以充一夜吗(怎么给充电宝充电)

    充电宝可以充一夜吗(怎么给充电宝充电)

  • 拼小圈好友怎么删除(拼小圈好友怎么加陌生人)

    拼小圈好友怎么删除(拼小圈好友怎么加陌生人)

  • 戴尔电脑关不了机是怎么回事(戴尔电脑关不了机怎么办?如何解决?)

    戴尔电脑关不了机是怎么回事(戴尔电脑关不了机怎么办?如何解决?)

  • 截图为什么不在相册里(截图为什么不在桌面上)

    截图为什么不在相册里(截图为什么不在桌面上)

  • iphone6用ios12卡吗(iphone6使用ios12会不会卡)

    iphone6用ios12卡吗(iphone6使用ios12会不会卡)

  • 组织结构设计的影响因素(组织结构设计的关键要素包括)

    组织结构设计的影响因素(组织结构设计的关键要素包括)

  • wps表格怎么删掉表格线(wps表格怎么删掉一行)

    wps表格怎么删掉表格线(wps表格怎么删掉一行)

  • 去哪儿网返现账户在哪里(去哪儿网返现是返现金吗)

    去哪儿网返现账户在哪里(去哪儿网返现是返现金吗)

  • miwifi小米路由器设置(miwifi小米路由器忘记密码)

    miwifi小米路由器设置(miwifi小米路由器忘记密码)

  • 文件设置为只读怎么弄(psd文件设置为只读)

    文件设置为只读怎么弄(psd文件设置为只读)

  • word中的格式在哪(word的格式在哪个功能区)

    word中的格式在哪(word的格式在哪个功能区)

  • laptop3何时发布(laptop3怎么样)

    laptop3何时发布(laptop3怎么样)

  • lex620是什么手机(lex626是什么手机)

    lex620是什么手机(lex626是什么手机)

  • vivo手机有测量工具吗(vivo手机有测量长度的功能吗)

    vivo手机有测量工具吗(vivo手机有测量长度的功能吗)

  • 苹果xr有没有nfc功能(iphonex有nfc吗)

    苹果xr有没有nfc功能(iphonex有nfc吗)

  • 咸鱼消息提醒在哪设置(闲鱼消息短信提醒)

    咸鱼消息提醒在哪设置(闲鱼消息短信提醒)

  • C++指针与其它复合类型(c++如何给指针赋值)

    C++指针与其它复合类型(c++如何给指针赋值)

  • dede 织梦编辑框显示不出来的问题(织梦内容页模板修改)

    dede 织梦编辑框显示不出来的问题(织梦内容页模板修改)

  • 银行委托贷款上征信吗
  • 社保未统一征收
  • 专票地址有误可以用吗
  • 实物投资账务处理
  • 交文化事业建设费的行业
  • 增值税申报表在哪里打印
  • 直接转让土地使用权税费
  • 房地产土地增值税优惠政策
  • 企业政策性搬迁所得税
  • 小企业所得税申报流程
  • 收到供应商发票的会计处理怎么做?
  • 普通发票电子发票没有章
  • 全国增值税发票查询平台 手机版
  • 车间扫帚存放架子
  • 股权转让需要什么资料
  • 金银首饰零售消费税税收优惠
  • 购买工装的进项能抵扣吗
  • 一般商业企业要缴纳哪些税?
  • 苹果电脑macbookpro使用教程
  • 外购的礼品送客户怎么做分录小规模
  • 小规模纳税人计税方法
  • 运输发票备注规定
  • 固定资产折旧的会计凭证
  • 劳务服务包括哪些范围
  • 电脑桌面图标如何更改自定义图片
  • macos10.15.7
  • 免抵退税的具体计算方法
  • css边框怎么做
  • 履约保证金和质保金可以一起收取吗
  • 高新技术产业的税收优惠
  • 长期挂账的在建工程如何处理
  • 行政事业单位转让不动产
  • 灯光璀璨的夜晚
  • 供热企业享受增值税吗
  • 劳务派遣企业简易征收管理办法
  • 会计处理的正确顺序
  • 终于见识到什么叫云横秦岭了
  • git t
  • 手工凭证三级明细
  • phpcms怎么用
  • 每个月工资扣的税为什么不一样
  • 外贸企业账务处理方法
  • 银行日记账更正
  • 2022年最新电脑操作系统
  • access使用查询向导固定常数
  • 小微企业材料
  • 公司的现金收入包括
  • 小型生产加工企业税率
  • 公司支付款项制度
  • 在建工程账务处理会计分录
  • 房开企业预缴增值税附加税费
  • 建安工程预缴税额怎么算
  • 记账凭证后面附发票第几联
  • 经营性租赁账务处理方法
  • 本年利润的年末余额
  • 装修公司完工交付文案
  • 残保金在网上怎么申报
  • 什么是资产减值准备计提
  • 如何远程连接小米摄像头
  • mysql很卡
  • xp系统怎么修改网络ip地址
  • bios 设置
  • win7系统怎么删除
  • 如何延长手机电池使用寿命
  • windowsxp怎么打开设置
  • centos硬件配置
  • window8.1下载
  • win10大更新2020
  • win8纯净版32位
  • win10预览版和正式版区别
  • linux dev/sr0
  • css一般可以放在几个地方
  • python mypy
  • opengl gltranslatef
  • jquery 操作json
  • unity移动ui
  • unityugui
  • python中import导入模块的方法
  • 沈阳和平税务大厅电话
  • 船舶吨税案例分析
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设