vue过滤器的使用

很多时候我们从后台拿到的数据格式并不是我们想要的，比如时间，一般后台给的是时间戳，前端需要转化为类似YYYY-MM-NN的形式，如果不是直接渲染数据，还是能够使用moment包去转化，如果是像在表格中这种写法还比较简单，能够对数据直接操作

{title: "更新时间", align: "center",key: "updateTime",
                          render: (h, params) => {
                            return h('div',moment.unix(params.row.Time/1000).format("YYYY-MM-DD HH:mm:ss"));
                          },
                        },

而像需要直接渲染的可能就需要我们遍历列表去一个一个修改，比较麻烦，这时候就可以使用过滤器。

过滤器有两种，一种是全局过滤器，可以在任何一个组件内都可以使用。另一种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用。

全局过滤器

import Vue from 'vue';
Vue.filter('formatTime', function (val) {
  const date = new Date(val);
  const year = date.getFullYear();
  const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
  const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${year}-${month}-${day} ${hour} : ${minutes} : ${seconds}`;
});

局部过滤器

export default {
    name: 'FilterDemo',
    /* 局部过滤器 */
    filters: {
      /* 格式化时间戳 */
      formatTime (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        const hour = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        return `${year}-${month}-${day} ${hour} : ${minutes} : ${seconds}`;
      }
    },
    data () {
      return {
 
      }
    }
    
  }

过滤器的使用

<template>
  <div>{{ time | formatTime }}</div>
  <div v-bind:id="time | formatTime"></div>
</template>