iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中全局常用的过滤方法解读
  • 796
分享到

Vue中全局常用的过滤方法解读

Vue全局Vue过滤方法Vue全局过滤 2023-01-28 06:01:44 796人浏览 薄情痞子
摘要

目录1.将整数部分逢三一断2.将数据格式化为金额3.展示时,字数超出10个字的后面省略4.格式化日期为YYYY-MM-DD5.格式化日期为YYYY-MM-DD HH:mm:ss总结全

全局引入filter:把写了方法的js文件映入进main.js:import ‘./utils/filter’

1.将整数部分逢三一断

例如:12345600 过滤为 12,345,600

Vue.filter('NumberFORMat', function(value) {
  if (!value) {
    return '0'
  }
  const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  return intPartFormat
})

2.将数据格式化为金额

2.1有根据正则格式化

例如 123456 过滤为 123,456.00

Vue.filter('MoneyFormat', function(number, decimals, symbol) {
    if (!decimals) {
      decimals = 2
    }
    if (!symbol) {
      symbol = ''
    }
    const decPoint = '.'
    const thousandsSep = ','
    number = (number + '').replace(/[^0-9+-Ee.]/g, '')
    const n = !isFinite(+number) ? 0 : +number
    const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
    const sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
    const dec = (typeof decPoint === 'undefined') ? '.' : decPoint
    let s = ''
    const toFixedFix = function(n, prec) {
      const k = Math.pow(10, prec)
      return '' + numMulti (n, k) / k
    }
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
    const re = /(-?\d+)(\d{3})/
    while (re.test(s[0])) {
      s[0] = s[0].replace(re, '$1' + sep + '$2')
    }
    if ((s[1] || '').length < prec) {
      s[1] = s[1] || ''
      s[1] += new Array(prec - s[1].length + 1).join('0')
    }
  
    return symbol + s.join(dec)
  })

上面过滤为金额的方法需要处理精度丢失问题,引入其它文件该numMulti方法如下:


export function numMulti (num1, num2) {
  num1 = num1 || 0
  num2 = num2 || 0

   let baseNum = 0
   try {
       baseNum += num1.toString().split('.')[1].length
   } catch (e) {
   }
   try {
       baseNum += num2.toString().split('.')[1].length
   } catch (e) {
   }
   return Number(num1.toString().replace('.', '')) * Number(num2.toString().replace('.', '')) / Math.pow(10, baseNum)
}

2.1.格式化货币

我经常需要格式化货币,它需要遵循以下规则:

123456789 => 123,456,789

123456789.123 => 123,456,789.123

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')  
}

formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

3.展示时,字数超出10个字的后面省略

用…展示代替:

  filters: {
    itemDescFilter: function (value) {
      if (!value) {
        return ''
      }

      value = value.toString()
      if (value.length <= 10) {
        return value
      } else {
        return value.substr(0, 10) + ' . . .'
      }
    }
  },

效果如下:

4.格式化日期为YYYY-MM-DD

创建filters.js文件并安装、导入moment改文件,把filters导入到main.js中全局使用,

全局过滤器,格式化日期为YYYY-MM-DD / 格式化日期为YYYY-MM-DD HH:mm:ss

Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD') {
  return moment(dataStr).format(pattern)
})

如下,完成数据格式化,例如其中的text为2022-04-02 11:11:11,经过改过滤器后展示的数据为2022-04-02

5.格式化日期为YYYY-MM-DD HH:mm:ss

Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

具体使用同第4点

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue中全局常用的过滤方法解读

本文链接: https://www.lsjlt.com/news/178333.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中全局常用的过滤方法解读
    目录1.将整数部分逢三一断2.将数据格式化为金额3.展示时,字数超出10个字的后面省略4.格式化日期为YYYY-MM-DD5.格式化日期为YYYY-MM-DD HH:mm:ss总结全...
    99+
    2023-01-28
    Vue全局 Vue过滤方法 Vue全局过滤
  • vue中的局部过滤器和全局过滤器代码实操
    v-model:绑定的value v-bind:绑定的type <html>   <head>       <script src="https://c...
    99+
    2024-04-02
  • vue全局过滤器基本使用方法是什么
    本篇内容介绍了“vue全局过滤器基本使用方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一.过滤器的概念Vue.js允许你自定义过滤...
    99+
    2023-06-25
  • Vue的filters(本地)或filter(全局)过滤常用数据类型解析
    目录filters(本地)或filter(全局)过滤常用数据类型Vue 全局常用的过滤方法1.将整数部分逢三一断2.将数据格式化为金额3.展示时,字数超出10个字的后面省略4.格式化...
    99+
    2024-04-02
  • JavaScript中常用的数组过滤方法
    在 JavaScript 编程中,经常会遇到需要对数组进行筛选和过滤的情况。本文将介绍几种常用的数组过滤方法,帮助你在处理数组数据时更加灵活高效。 1. 使用filter()方法 filter() 方...
    99+
    2023-10-21
    javascript 前端 开发语言
  • VUE中的filters过滤器使用方法
    目录前言一、全局过滤器1、全局过滤器之单一挂载2、全局过滤器之批量挂载二、组件过滤器前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双...
    99+
    2024-04-02
  • Vue过滤器使用方法详解
    目录前言过滤器私有过滤器插值表达式中使用v-bind属性绑定全局过滤器前言 本篇来学习vue(仅适用vue2)中过滤器的基本用法 过滤器 过滤器(Filters)是vue为开发者提供...
    99+
    2022-12-15
    Vue过滤器的作用 Vue过滤器如何使用 Vue过滤器
  • vue中过滤器的用法
    一、过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用。 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二、使用位置 过滤器...
    99+
    2024-04-02
  • VUE过滤器的使用方法
    这篇文章主要讲解了“VUE过滤器的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“VUE过滤器的使用方法”吧!1. 定义一个日期格式化函数都9012了...
    99+
    2024-04-02
  • vue全局过滤器概念及注意事项和基本使用方法
    目录一.过滤器的概念1.自定义一个全局过滤器的格式二、过滤器的调用方法三.过滤器的注意事项四、基本使用方法一.过滤器的概念 Vue.js允许你自定义过滤器,可被用作一些常见的文本格...
    99+
    2024-04-02
  • Wireshark常用过滤使用方法
    Wireshark是一款用于网络分析的工具,常用于捕获和分析网络数据包。以下是Wireshark常用的过滤使用方法:1. IP地址过...
    99+
    2023-09-13
    Wireshark
  • vue-cli 3中怎么实现一个全局过滤器
    vue-cli 3中怎么实现一个全局过滤器,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、创建 filters.js首先新建一个filter...
    99+
    2024-04-02
  • Vue中的过滤器(filter)详解
    目录过滤器使用位置全局过滤器、局部过滤器 全局过滤器:局部过滤器:过滤器中传入多个参数:多个过滤器串联:官方文档:https://cn.vuejs.org/v2/guide...
    99+
    2022-11-13
    Vue中的过滤器 Vue filter过滤器 vue filter
  • 十分钟带你读懂Vue中的过滤器
    目录一、什么是过滤器二、过滤器声明与使用三、Vue过滤器的分类1.按照作用范围分类2.按照使用方式分类四、连续调用多个过滤器五、过滤器传参六、过滤器的兼容性问题一、什么是过滤器 过滤...
    99+
    2023-03-11
    Vue过滤器使用 Vue过滤器
  • JavaFile类常用方法与文件过滤器详解
    目录File类File类常用的构造方法查看文件的相应信息遍历目录下的文件文件过滤器对子目录进行遍历删除文件及目录File类 File类用于封装一个路径,这个路径可以是从系统盘符开始的...
    99+
    2024-04-02
  • 详解Tomcat常用的过滤器
    目录一、跨域过滤器CorsFilter1.1、配置示例1.2、参数说明二、CSRF保护过滤器CsrfPreventionFilter2.1、配置示例2.2、参数说明三、防止参数丢失过...
    99+
    2024-04-02
  • vue中如何定义全局方法
    在vue中定义全局方法的方法:1.利用全局混入mixin定义;2.通过prototype挂载定义;3.使用Plugin方法定义;4.直接在vue文件中定义;具体方法如下:利用全局混入mixin定义全局方法Vue.mixin(mixin)ne...
    99+
    2024-04-02
  • VUE中filters过滤器的两种用法实例
    目录前言一、全局过滤器全局过滤器之单一挂载全局过滤器之批量挂载二、组件过滤器附:过滤器中传入多个参数总结前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器...
    99+
    2024-04-02
  • Vue中过滤器定义以及使用方法实例
    目录介绍Vue中过滤器如何使用组件内过滤器全局过滤器补充:vue中的过滤器可以格式化以及美化内容总结介绍 过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用...
    99+
    2022-11-13
    vue过滤器的使用 vue的过滤器 vue的过滤器语法
  • Java中使用Filter过滤器的方法
    Filter过滤器 着重记录下 public void doFilter(){} 方法参数: (1) ServletRequest servletRequest  请求re...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作