vue中过滤器filter的讲解

程序员文章站 2022-06-03 11:42:25

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的讲解