美文网首页
19-Vue自定义全局过滤器

19-Vue自定义全局过滤器

作者: 梦想成为小仙女 | 来源:发表于2019-02-22 13:32 被阅读11次

http://www.runoob.com/js/js-regexp.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/管道操作符
https://www.jianshu.com/p/07913e898054

一.重点

1.管道函数
试验性的管道操作符 |> (目前在 stage 1阶段)允许以一种易读的方式去对函数链式调用。本质上来说,管道操作符是单参数函数调用的语法糖,它允许你以'%21' |> decodeURI来替代decodeURI('%21')。
--------MDN
管道机制一开始是UNIX中出现的,一个程序的输出直接成为下一个程序的输入,就像水流过管道一样方便(类似于函数式编程中的filter或者一切皆对象的链式操作),而且多个单一功能的函数通过管道组合成复合函数(UNIX的“KISS”原则)。
-------@ArimaKisho
简单的说,就是将上一个函数的输出,作为下一个函数的输入
2.正则表达式
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
------菜鸟教程
简单的说,就是利用字符串匹配具有某一规则的所有字符串
格式:
/正则表达式主体/修饰符(可选)
实例:
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");


image.png

二.助记图

image.png

1.问题
对于在界面上显示的某些数据,我们希望它符合某种规范,比如替换敏感词
2.解决方法
引入过滤器的概念:
Vue.js允许你自定义过滤器,用于一些常见的文本格式化.
3.过滤器适用范围
双花括号插值和v-bind表达式
4.自定义全局过滤器的格式
Vue.filter("过滤器名称",function(value){return value.replace(/学院/g,"大学")})
5.适用过滤器
{{需要过滤的数据 | 过滤器的名称}}
默认情况下,会将|前面的数据传递给方法
默认情况下,插入值和绑定值都会适用过滤器过滤之后的数据来填充内容
6.注意
过滤器可以连续使用(管道函数)
{{msg | msgFormat1 | msgFormat2}}
7.代码验证


image.png

相关文章

  • vue filter 过滤器使用

    格式化时间 自定义全局过滤器 vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。 一、 全局过滤器 全局...

  • 19-Vue自定义全局过滤器

    http://www.runoob.com/js/js-regexp.htmlhttps://developer....

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • vue的过滤器

    自定义过滤器的用法 局部声明 全局声明

  • vue.js过滤器的基本使用

    过滤器分为两种: 全局过滤器 自定义过滤器 使用过滤器,我们可以对数据进行格式化处理 具体代码 代码解析: 全局过...

  • 04-Vue中的过滤器

    一、过滤器 定义:用来过滤数据模型,在显示之前进行数据处理和筛选 自定义过滤器 全局过滤器 局部过滤器 1.全局过...

  • 4.Vue之自定义过滤器

    介绍 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 I...

  • vue过滤器(filter)

    vue中可以自定义过滤器,用于{{插槽}}和v-bind表达式。 全局定义(1) 全局方法 Vue.filter(...

  • 过滤器

    ...过滤器分为全局过滤器和局部过滤器全局过滤器的格式:html:{{数据,全局过滤器的名字}}//解析数据js:...

  • vue常用特性应用场景

    1 过滤器 Vue.filter 定义一个全局过滤器 2 自定义指令 让表单自动获取焦点 通过Vue.direc...

网友评论

      本文标题:19-Vue自定义全局过滤器

      本文链接:https://www.haomeiwen.com/subject/hpnsyqtx.html