methods，computed，filter，watch

vue格式化时间的多种方法

一、methods（方法）

      表示一个具体的操作，根据业务逻辑进行编码

• （1）可以传参及有返回值（即可有可无）
• （2）使用一次调用一次

        methods: {
          // time 秒数
          formatTime(T) {
            let date = new Date(T * 1000);
            let Y = date.getFullYear();
            let M = date.getMonth() + 1;
            let D = date.getDate();
            M = M < 10 ? "0" + M : M;
            D = D < 10 ? "0" + D : D;
            return `${Y}-${M}-${D}`;
          }
        }

二、computed（计算属性）

      根据原有的属性，计算出一个新的属性，当依赖的属性发生改变的时候，新的属性也会发生改变

• （1）不通过传参，数据都是从data中获取，且必须有返回值
• （2）有缓存的作用
• （3）相当于data中的属性，直接使用

        computed: {
          time2() {
            let date = new Date(this.time * 1000);
            let Y = date.getFullYear();
            let M = date.getMonth() + 1;
            let D = date.getDate();
            M = M < 10 ? "0" + M : M;
            D = D < 10 ? "0" + D : D;
            return `${Y}-${M}-${D}`;
          }
        }

三、watch（监听器）

      主要用来监听某些特定数据的变化，从而进行某些业务逻辑的操作（可以看做methods和computed的结合体）

• 需要传参不需要返回值

        watch: {
          time(T) {   对time这个属性进行监听
            let date = new Date(T);
            let Y = date.getFullYear();
            let M = date.getMonth() + 1;
            let D = date.getDate();
            M = M < 10 ? "0" + M : M;
            D = D < 10 ? "0" + D : D;
            let str = `${Y}-${M}-${D}`;
            this.time2 = str;
          }
        },

4、fileters（过滤器）

      常用于格式化字段

      {{time | formatTime}}     要访问time这个属性，要先经过formatTime处理

• （1）需要传参和返回值

• （2）局部过滤器：在组件中定义本地的过滤器

        filters: {
          formatTime(T) {
            let date = new Date(T);
            let Y = date.getFullYear();
            let M = date.getMonth() + 1;
            let D = date.getDate();
            M = M < 10 ? "0" + M : M;
            D = D < 10 ? "0" + D : D;
            return `${Y}-${M}-${D}`;
          }
        }

• （3）全局过滤器：在创建Vue实例之前全局定义过滤器
  • Vue.filters( ' 过滤器名 ', ' 方法 ' )

        import Vue from 'vue';

        //格式化时间
        Vue.filter('formateDate', (time) => {
            let date = new Date(time * 1000); //创建一个日期对象
            let Y = date.getFullYear(); //年
            let M = date.getMonth() + 1; //月
            let D = date.getDate(); //日

            //补0操作，使用三目运算符
            M = M < 10 ? "0" + M : M; //月
            D = D < 10 ? "0" + D : D; //日

            return `${Y}-${M}-${D}`;
        })

五、区别

1、methods和computed的区别

• （1）方法每次都会执行

• （2）会有缓存的作用,当数据发生改变的时候才会执行

2、computed和watch的区别

• （1）能用时就用

• （2）能实现的，都能实现且功能更加强大