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） $\color{red}{methods}$ 方法每次都会执行
（2） $\color{red}{computed}$ 会有缓存的作用,当数据发生改变的时候才会执行

2、computed和watch的区别

（1）能用 $\color{red}{computed}$ 时就用 $\color{red}{computed}$
（2） $\color{red}{computed}$ 能实现的， $\color{red}{watch}$ 都能实现且功能更加强大

最后编辑于：2019.05.06 17:45:50