Vue的全局过滤器和私有过滤器的实现


Posted in Javascript onApril 20, 2020

Vue允许自定义过滤器 可被用作一些常见的文本格式化

过滤器可以用在两个地方:mustache插值表达式 和 v-bind表达式

过滤器应被添加在JavaScript表达式的尾部 由“管道”符指示(管道符就是一个竖杠:|)

一、全局过滤器

全局过滤器调用时的基本格式:

通过管道符[|]来进行过滤 例如{{name | nameOpe}}
定义过滤器的语法:Vue.filter("过滤器名称",处理函数)

处理函数的第一个参数已被固定了 是data 即管道符前面传递的数据
若要添加其它入参 只能添加在data的后面了

Vue.filter("",function(data)
{
  return data+"123";
})

(上述例子中 该过滤器的功能就是给过滤器前面的数据加上"123"字符串)

一个值得注意的地方是:过滤器并没有修改原数据 只是在输出之前进行了一层处理

<div id="app">
	<p>{{msg | msgFormat}}</p>
</div>
<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,"李强");
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛,一天早上,同学碰见我,向我打招呼:'陈涛,你好!'"
    }
  });
</script>

过滤器也可以传入参数 且还能传多个参数

<div id="app">
	<!-- 过滤器也可以传参 还能传多个参数 -->
	<p>{{msg | msgFormat("豪哥","111")}}</p>
</div>
<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data,arg1,arg2){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,arg1+arg2);
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛,一天早上,同学碰见我,向我打招呼:'陈涛,你好!'"
    },
    methods:{}
  });
</script>

还能多次调用过滤器 被调用的过滤器会按顺序执行

<div id="app">
	<!-- 调用多个过滤器 -->
	<p>{{msg | msgFormat("豪哥","111") | test}}</p>
</div>
<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data,arg1,arg2){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,arg1+arg2);
  })

  // 可多次调用过滤器
  Vue.filter("test",function(msg)
  {
    return "<<<"+msg+">>>"
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛,一天早上,同学碰见我,向我打招呼:'陈涛,你好!'"
    },
    methods:{}
  });
</script>

这两个过滤器组合起来 顺序执行 输出结果就是:

Vue的全局过滤器和私有过滤器的实现

二、私有过滤器

全局过滤器是能够被所有的Vue实例共享 因而得名
那么 同理 私有过滤器就是只能被定义的那个Vue实例使用

过滤器的调用顺序 采用的是就近原则
即 若有私有过滤器 则会优先使用私有过滤器 若没有私有过滤器 则会使用全局过滤器

每个过滤器有其自己的【名称】和【处理函数】

定义私有过滤器的时候 也是在Vue实例里定义的
有个filters属性专门用来定义私有过滤器
格式就是:过滤器名:方法

以一个日期格式转换过滤器作为例子:

<div id="app2">
	<h3>{{date | dateFormat}}</h3>
</div>
// 自定义私有过滤器
var vm2=new Vue({
  el:'#app2',
  data:{
    date:new Date()
  },
  methods:{},
  // 定义私有过滤器
  filters:{
    dateFormat:function(dateStr,pattern="")
    {
      var dt=new Date(dateStr);

      var year=dt.getFullYear();
      var month=dt.getMonth()+1;
      var day=dt.getDate();

      if (pattern.toLowerCase()==="yyyy-mm-dd")
      {
        return `${year}-${month}-${day}`;
      }
      else
      {
        var hour=dt.getHours();
        var minute=dt.getMinutes();
        var second=dt.getSeconds();

        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      }
    }
  }
})

到此这篇关于Vue的全局过滤器和私有过滤器的实现的文章就介绍到这了,更多相关Vue的全局过滤器和私有过滤器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
Javascript的闭包详解
Dec 26 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
vue实现购物车的监听
Apr 20 #Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 #Javascript
You might like
php中的ini配置原理详解
2014/10/14 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
js字符串操作方法实例分析
2015/05/06 Javascript
DOM 高级编程
2015/05/06 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python批量发送post请求的实现代码
2018/05/05 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
什么是网络协议
2016/04/07 面试题
五型班组建设方案
2014/02/10 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
运动会演讲稿
2014/05/07 职场文书
销售提升方案
2014/06/07 职场文书
药店促销活动策划方案
2014/08/24 职场文书
防灾减灾标语
2014/10/07 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL