2021-07-30

过滤器

作用：
格式化数据，如：字符串格式化为首字母大写，将时间格式化为指定格式等

自定义全局过滤器

Vue.filter('过滤器的名称'，function（value）{
//过滤器处理业务逻辑的函数
})
注：value是要被格式化的值，其实就是变量的值，我们格式化数据，就是格式化变量的值

自定义局部过滤器

filters:{
'过滤器的名称'：function（）{
//过滤器处理业务逻辑的函数
})
}

过滤器的使用

一、使用插值表达式
<div>{{变量名 | 自定义过滤器名}}</div>
<div>{{变量名 | 自定义过滤器名1 | 自定义过滤器名2}}</div>
注：使用级联操作（多个过滤器），每个过滤器过滤的值是上一个过滤器传下来的！
二、使用属性绑定
<div ：属性名=‘变量名 | 自定义过滤器名’></div>

实战操作

<div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper1}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper2'>测试数据</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      过滤器
      1、可以用与插值表达式和属性绑定
      2、支持级联操作
    */
    Vue.filter('upper1', function(val) {
       return val.charAt(0).toUpperCase() + val.slice(1);
     });
    Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper2: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

带参数的过滤器

注册:

Vue.fliter(‘formate’,function（value，arg）{
	value : 是变量data的值
	arg	  : 是formate传递的参数
})

使用:

<div>{{data | formate('yyyy-mm-dd')}}</div>

实战例子：

 Vue.filter('format', function(value, arg) {
      if(arg == 'yyyy-MM-dd') {
        var ret = '';
        ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        return ret;
      }
      return value;
    })

大神封装的时间模板如下，可拿来直接使用：

Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
          });
          return format;
      }
      return dateFormat(value, arg);
    })