VUE中的全局过滤器

用心去追梦

于 2022-06-23 10:17:38 发布

阅读量407

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33240556/article/details/125422022

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何创建和使用全局过滤器，例如`moneyFilters`用于金额转换，`Thousands`实现千位分隔，以及`formDate`用于时间戳转日期格式。这些过滤器涵盖了数值格式化和时间处理的基本需求，有助于提升前端展示的用户体验。

摘要由CSDN通过智能技术生成

VUE中的全局过滤器
- 语法
  - main.js

语法

Vue.filter( id, [definition] )
{string} id
{Function} [definition]

main.js 添加


Vue.filter('moneyFilters', function (value) {
  let val = value
  let result = "";
  if (val >= 1) {
    result = val
  } else if (val < 1 && val > 0) {
    result = (val * 10000).toFixed()
  } else {
    result = val;
  }
  return result;
})


Vue.filter('moneyFilters', function (value) {
  let val = value
  let result = "";
  if (val >= 1) {
    result = "亿";
  } else if (val < 1 && val > 0) {
    result = "万";
  } else {
    result =  "元";
  }
  return result;
})

//整数留下2位
let money = value => {
  if (!value) return "0.00";
  value = Math.round(parseFloat(value) * 100) / 100;
  let xsd = value.toString().split(".");
  if (xsd.length == 1) {
    value = value.toString() + ".00";
    return value;
  }
  return value
}

//千位转化
let Thousands = value => {
  return (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

//时间戳转换
let formDate = value => {
    let date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = date.getDate() + ' ';
    let h = date.getHours().length <= 1 ? '0' + date.getHours() + ':' : date.getHours() + ':';
    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
export {
  money,
  Thousands,
  formDate
}