vue中过滤器filter的使用

1. src下添加filters文件夹 里添加index.js文件
用来写公共的方法
2. main.js中加
在这里插入图片描述

import * as filters from './filters';
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});

3. 使用

第一个参数 | 方法名(第二个参数,第三个参数)

在这里插入图片描述
时间差方法

// 时间差
export const TimeDifference = (beginTime, endTime) => {
  let time;
  if (endTime && dayjs(beginTime).isBefore(endTime)) {
    const dateBegin = new Date(beginTime);
    const dateEnd = new Date(endTime);
    const dateDiff = dateEnd.getTime() - dateBegin.getTime(); // 时间差的毫秒数
    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); // 计算出相差天数
    const leave1 = dateDiff % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
    const hours = Math.floor(leave1 / (3600 * 1000)); // 计算出小时数
    // 计算相差分钟数
    const leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
    const minutes = Math.floor(leave2 / (60 * 1000)); // 计算相差分钟数
    // 计算相差秒数
    const leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
    const seconds = Math.round(leave3 / 1000);
    time = `${dayDiff}${hours}小时${minutes}分钟${seconds}秒`;
    if (dayDiff === 0) {
      time = `${hours}小时${minutes}分钟`;
    }
    if (dayDiff === 0 && hours === 0) {
      time = `${minutes}分钟`;
    }
    if (dayDiff === 0 && hours === 0 && minutes === 0) {
      time = `${seconds}秒`;
    }
    return time;
  }
  return time;
};

日期方法

// 年月日
export const GMTToStr = (time) => {
  const now = new Date(time);
  const year = now.getFullYear();
  let mon = now.getMonth() + 1;
  let date = now.getDate();
  if (mon < 10) {
    mon = `0${mon}`;
  }
  if (date < 10) {
    date = `0${date}`;
  }
  const postDate = `${year}-${mon}-${date}`;
  return postDate;
};

// 年月日时分秒
export const DateTime = (time) => {
  const now = new Date(time);
  const year = now.getFullYear();
  let mon = now.getMonth() + 1;
  let date = now.getDate();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  if (mon < 10) {
    mon = `0${mon}`;
  }
  if (date < 10) {
    date = `0${date}`;
  }
  if (hour < 10) {
    hour = `0${hour}`;
  }
  if (minute < 10) {
    minute = `0${minute}`;
  }
  if (second < 10) {
    second = `0${second}`;
  }
  const postDate = `${year}-${mon}-${date} ${hour}:${minute}:${second}`;
  return postDate;
};

仅在当前页面中直接用!
export default {
在这里插入图片描述
}

filters:{
    filtStatus(val) {
      let name = ''
      if (val === '0') {
        name = '是'
      } else if (val === '1') {
         name = '否'
      }  else {
        name = ''
      }
      return name
    }
  },

使用方法一样

第一个参数 | 方法名(第二个参数,第三个参数)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值