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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
vue 全局环境切换问题
Oct 27 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python 序列的方法总结
2016/10/18 Python
Php多进程实现代码
2018/05/07 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python集合能干吗
2020/07/19 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
成品仓管员岗位职责
2013/12/11 职场文书
保护黄河倡议书
2014/05/16 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
大学毕业生推荐信
2014/07/09 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
教师节祝酒词
2015/08/11 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Promise面试题详解之控制并发
2021/05/14 面试题
新手必备Python开发环境搭建教程
2021/05/28 Python