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 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 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中进行身份认证
2006/10/09 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python内置数据类型详解
2014/08/18 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python自动抢红包教程详解
2019/06/11 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python 创建一维的0向量实例
2019/12/02 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
个人工作能力自我评价
2015/03/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python