Vue-全局过滤器以及进阶操作

news/2024/11/24 4:55:52/

前言

上篇文件讲述了,Vue全局过滤器的基本使用:Vue过滤器的基本使用

本篇将延续上文,讲述vue中过滤器的进阶操作

过滤器传参

如果有一天,多个地方使用过滤器,而且需要传递参数,那么可以这么写

在这里插入图片描述

在这里插入图片描述

多个过滤器串联使用

多个过滤器直接是可以串联的,使用 |(管道符)xxx拼接即可
比如我要转化后截取当前年,就可以这么写

在这里插入图片描述

在这里插入图片描述

全局过滤器

现在写的filter过滤器,都是局部的,只能在vm中使用,但是如果有组件,比如组件A写了一个filterA过滤器,组件B写了一个filterB过滤器,那么组件B就不能使用filterA,当然组件A也不能使用filterB,如何解决这个问题呢,就要使用全局过滤器

在这里插入图片描述

通过例子验证说明局部过滤器,现在再写一个div容器创建一个vue实例

在这里插入图片描述

在这里插入图片描述

现在我觉得msg的内容太长了,想调用截取过滤器

在这里插入图片描述

看到报错了,说不能找到过滤器mySlice,强有力的证明了局部过滤器的局限性

在这里插入图片描述

如果想开启全局的过滤器配置,可以使用命令

    // 注册全局过滤器 注意:vue中过滤器是filters,在这里是filter//需要先准备过滤器再创建实例,顺序不能错Vue.filter('mySlice',function(value){return value.slice(0,4)})

在这里插入图片描述

查看页面,使用过滤器成功

在这里插入图片描述

v-bind使用过滤器

过滤器不止是只能写在插值语法里面的,还可以写在v-bind,但是通常这些写法比较少,下面一起看下把
比如这个例子,很明显有多余的字符,我就可以使用过滤器截取

在这里插入图片描述

查看页面,截取到了

在这里插入图片描述

只能配合插值语法或者v-bind使用!使用v-model会报错的!这里就不演示了

总结

过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理,过于复杂的可以使用计算属性)
语法:
1:注册过滤器,Vue.filter(name,callback)或new Vue(filters:{})
2:使用过滤器:{{xxx | 过滤器名称}}或v-bind:属性=“xxx” | 过滤器名称
备注:
1:过滤器也可以接收额外参数,多个过滤器之间可以配合使用
2:并没有改变原来的数据,是产生新的对应的数据


http://www.ppmy.cn/news/53747.html

相关文章

黑客利用WordPress 插件暗中建立后门网站

东方联盟网络安全组织在上周发布的一份报告中透露,有人观察到威胁行为者利用一个合法但过时的 WordPress 插件暗中建立后门网站,作为正在进行的活动的一部分。 有问题的插件是 Eval PHP,由名为 flashpixx 的开发人员发布。它允许用户插入 PH…

在阿里做测试开发的这5年,收获与感悟...

正好在离职交接空档期,就抽空简单分享自己的一些个人经历给大家,希望对刚毕业不久或者工作三五年的同学能有一些帮助。 测试新人 我的职业生涯开始和大多数测试人一样,开始接触都是纯功能界面测试。那时候在一家电商公司做测试,做…

怎么把png图片压缩到100k以内,3个工具高效处理

怎么把png图片压缩到100k以内?为什么要压缩图片呢?当我们在提交资料的时候,而系统却提示图片过大无法上传的情况,大多都限制100K以内,这个时候我们就需要压缩图片。当我们网站打开的速度很慢的时候,这个时候…

华为面试题:1+4=5,2+5=12,3+6=21,问8+11=?网友:幼儿园级别

面试,一直都是职场人士绕不过去的坎,对于有的人来说,或许更擅长日常的工作,在面试环节可谓是自己的薄弱环节,但对于有的人来说,相比于工作,更擅长应付面试! 最近,有一位…

MiniGPT-4开源了:看图聊天、教学、创作、搭网站

深度学习系列文章 文章目录 深度学习系列文章前言MiniGPT4效果展示 前言 一个月前,OpenAI 总裁 Greg Brockman 向世人展示了 GPT-4 令人惊讶的多模态能力,如从手写文本直接生成网站和识别图像中的幽默元素等。 尽管目前 OpenAI 暂未对 GPT-4 用户开放这…

实景区剧本杀系统开发

实景区剧本杀系统开发需要考虑以下几个方面: 场地选取:选择合适的场地,足够容纳游戏人数和游戏内容,同时需要考虑安全性和便利性。 剧情设定:根据场地和游戏类型设计剧情,包括人物角色、任务目标、…

C. Trailing Loves (or L‘oeufs?)(求某个质因子在n的阶乘中的个数 + 思维)

Problem - C - Codeforces Aki喜欢数字,尤其是那些带有尾随零的数字。例如,数字9200有两个尾随零。Aki认为数字拥有的尾随零越多,它就越漂亮。 然而,Aki认为,一个数字拥有的尾随零的数量并不是固定的,而是…

【网络安全】CVE 漏洞分析以及复现

漏洞详情 Shiro 在路径控制的时候,未能对传入的 url 编码进行 decode 解码,导致攻击者可以绕过过滤器,访问被过滤的路径。 漏洞影响版本 Shiro 1.0.0-incubating 对应 Maven Repo 里面也有 环境搭建 这个比 Shiro550、Shiro721 要增加一些…