Vue2.0过滤器

概念

Vue1.0提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，我们称它为系统过滤器。Vue也提供了一个接口用来给程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。

自定义私有的过滤器

下面是一个冗余的示范代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h4>{{time}}</h4>
      <h4>{{time | datefmt}}</h4>
    </div>
    <div id="app1">
      <h4>{{time | datefmt}}</h4>
    </div>

    <script>
      new Vue({
        el: "#app1",
        data: {
          time: new Date()
        },
        filters: {
          datefmt: function(input) {
            var result = "";
            var year = input.getFullYear();
            var month = input.getMonth() + 1;
            var day = input.getDate();
            result = year + "-" + month + "-" + day;
            return result;
          }
        }
      })

      new Vue({
        el: '#app',
        data: {
          time: new Date()
        },
        //在某一个Vue对象内部定义的过滤器称之为私有过滤器
        //这种过滤器只有在当前vue对象el指定的监管区域起作用
        filters: {
          //input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
          datefmt: function(input) {
            //过滤器的逻辑：将input的值格式化成yyyy-MM-dd字符串输出
            var result = "";
            var year = input.getFullYear();
            var month = input.getMonth() + 1;
            var day = input.getDate();
            result = year + "-" + month + "-" + day;

            return result;
          }
        }
      })
    </script>
  </body>
</html>

自定义全局过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h4>{{time}}</h4>
      <h4>{{time | datefmt}}</h4>
    </div>
    <div id="app1">
      <h4>{{time | datefmt}}</h4>
    </div>

    <script>
      Vue.filter("datefmt", function(input) {
        var result = "";
        var year = input.getFullYear();
        var month = input.getMonth() + 1;
        var day = input.getDate();
        result = year + "-" + month + "-" + day;
        return result;
      })
      new Vue({
        el: "#app1",
        data: {
          time: new Date()
        }
      })

      new Vue({
        el: '#app',
        data: {
          time: new Date()
        }
      })
    </script>
  </body>
</html>