vue中过滤器filter的讲解


Posted in Javascript onJanuary 21, 2019

vue中过滤器filter的讲解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- {{}}中的|表示过滤器管道符,过滤器后面的为过滤函数 -->
    <p>{{msg | msgFormat('疯狂+1')}}</p>
    <!-- 多个过滤函数进行调用 -->
    <p>{{msg | msgFormat('疯狂+1') | test}}</p>
    <h2>{{time | dateFormat}}</h2>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  //过滤器的定义语法
  //Vue.filter('过滤器的名称',function () { })
  //过滤器中的function,第一个参数data,已经被规定死,永远都是过滤器管道符前面传递过来的数据
  // 从第二个参数开始就是传值
  // Vue.filter('过滤器名称',function(data){
  //   return data+123
  // });
  //定义一个Vue全局的过滤器,名字:msgFormat
  Vue.filter('msgFormat',function(msg,param) {
    //字符出中的replace方法,第一个参数,出了写一个字符串之外,还可以定义一个正则
    // return msg.replace('单纯','邪恶');
    // return msg.replace(/单纯/g,'邪恶')
    return msg.replace(/单纯/g,param)
  })
  Vue.filter('test',function(msg) {
    return msg+'love'
  })
  //如何定义一个私有过滤(局部)
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '我也是一个单纯的少年,单纯到自己很可爱,我也会喜欢你',
      time: new Date(),
    },
    //定义私有过滤器,过滤器有两个条件[过滤器名称 和 处理函数 ]
    filters: {
      /*
      过滤器调用的时候,采用的是就近原则,
      如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器
      */
      //param = '';es6的初始化值
      dateFormat: function(time,param = ''){
        var dt = new Date(time);
        // yyyy-mm-dd
        var y = dt.getFullYear();
        // var m = dt.getMonth()+1;
        var m = (dt.getMonth()+1).toString().padStart(2,'0');
        var d = dt.getDate();
        // return y+'-'+m+'-'+d;
        //模板字符串
        // return `${y}-${m}-${d}`;
        if(param.toLowerCase() === 'yyyy-mm-dd'){
          return `${y}-${m}-${d}`;
        }else{
          var hh = dt.getHours();
          var mm = (dt.getMinutes()).toString().padStart(2,'0');
          var ss = dt.getSeconds();
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    },
    methods: { }
  })
</script>
</html>
[点击并拖拽以移动]

vue中过滤器filter的讲解

vue中过滤器filter的讲解

效果图

vue中过滤器filter的讲解

vue中过滤器filter的讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
小程序实现分类页
Jul 12 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 #Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 #Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 #Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 #Javascript
实例介绍JavaScript中多种组合继承
Jan 20 #Javascript
You might like
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jQuery使用手册之 事件处理
2007/03/24 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
通过python3实现投票功能代码实例
2019/09/26 Python
Python多进程编程常用方法解析
2020/03/26 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
公司租车协议书
2015/01/29 职场文书
债务纠纷代理词
2015/05/25 职场文书
张思德观后感
2015/06/09 职场文书
学生会任命书范本
2015/09/21 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技