欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue的filters(本地)或filter(全局)過濾常用數(shù)據(jù)類型解析

 更新時間:2022年07月27日 09:43:44   作者:你摯愛的強(qiáng)哥  
這篇文章主要介紹了Vue的filters(本地)或filter(全局)過濾常用數(shù)據(jù)類型,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

filters(本地)或filter(全局)過濾常用數(shù)據(jù)類型

情況一:后臺給的日期是Sat Jul 31 2021 21:50:01 GMT+0800 (中國標(biāo)準(zhǔn)時間),如果直接呈現(xiàn)給用戶,他們一定會吐槽你不說人話~~~

情況二:后臺給的百分?jǐn)?shù)是小數(shù)沒有轉(zhuǎn)化成00%格式

采用vue的過濾機(jī)制就可以解決這種情況,有兩種方式:

第一種:全局寫法,在main.js里面加入

// 【全局過濾】----------------------------------------
?
//轉(zhuǎn)換情況一的日期
Vue.filter('yyyy_MM_dd', v => {
? ? if (v) return new Date(v)
? ? ? ? .toLocaleString("zh-Hans-CN", {
? ? ? ? ? ? year: "numeric",
? ? ? ? ? ? month: "2-digit",
? ? ? ? ? ? day: "2-digit",
? ? ? ? }).replace(/\//g, "-");
? ? else return '';
});
?
//轉(zhuǎn)換情況二的百分?jǐn)?shù)
Vue.filter('percent', v => {
? ? if (v) return ?Math.abs(v.toFixed(2)) + "%";
? ? else return 0;
});

第二種:本地寫法,在vue文件頁面的<script></script>里面加入

? filters: {
? ? //轉(zhuǎn)換情況一的日期
? ? yyyy_MM_dd: (v) => {
? ? ? if (v)
? ? ? ? return new Date(v)
? ? ? ? ? .toLocaleString("zh-Hans-CN", {
? ? ? ? ? ? year: "numeric",
? ? ? ? ? ? month: "2-digit",
? ? ? ? ? ? day: "2-digit",
? ? ? ? ? })
? ? ? ? ? .replace(/\//g, "-");
? ? ? else return "";
? ? },
?
? ? //轉(zhuǎn)換情況二的百分?jǐn)?shù)
? ? percent: (v) => {
? ? ? if (v) return Math.abs(v.toFixed(2)) + "%";
? ? ? else return 0;
? ? },
? },

然后在綁定對應(yīng)數(shù)據(jù)的地方用豎線“|”跟上對應(yīng)的過濾方法就可以了

{{ 日期 | yyyy_MM_dd }}
{{ 小數(shù) | percent }}
 
 
/*額外知識:
過濾器還支持串聯(lián),也就是多個 | filterName | filterName | ... 這樣可以綜合在一起使用多個過濾功能。
過濾器是 JavaScript 函數(shù),因此可以接收參數(shù):
{{ string | filter('參數(shù)1', 參數(shù)2) }}
這里,filter被定義為接收三個參數(shù)的過濾器函數(shù)。其中 string 的值作為第一個參數(shù),普通字符串 '參數(shù)1' 作為第二個參數(shù),表達(dá)式 參數(shù)2 的值作為第三個參數(shù)。
*/

Vue 全局常用的過濾方法

全局引入filter:把寫了方法的js文件映入進(jìn)main.js:import ‘./utils/filter’

1.將整數(shù)部分逢三一斷

例如:12345600 過濾為 12,345,600

Vue.filter('NumberFormat', function(value) {
  if (!value) {
    return '0'
  }
  const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 將整數(shù)部分逢三一斷
  return intPartFormat
})

2.將數(shù)據(jù)格式化為金額

2.1有根據(jù)正則格式化

例如 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方法如下:

/**
* 乘法運(yùn)算,避免數(shù)據(jù)相乘小數(shù)點(diǎn)后產(chǎn)生多位數(shù)和計(jì)算精度損失。
*
* @param num1被乘數(shù) | num2乘數(shù)
*/
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.2.格式化貨幣

我經(jīng)常需要格式化貨幣,它需要遵循以下規(guī)則:

  • 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.展示時,字?jǐn)?shù)超出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

創(chuàng)建filters.js文件并安裝、導(dǎo)入moment改文件,把filters導(dǎo)入到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)
})

如下,完成數(shù)據(jù)格式化,例如其中的text為2022-04-02 11:11:11,經(jīng)過改過濾器后展示的數(shù)據(jù)為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點(diǎn)

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中如何使用dayjs

    vue3中如何使用dayjs

    這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue3使用echarts繪制儀表盤

    Vue3使用echarts繪制儀表盤

    這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制儀表盤,文中的示例代碼積極學(xué)習(xí),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-07-07
  • Vue父子組件元素獲取方法互相調(diào)用示例詳解

    Vue父子組件元素獲取方法互相調(diào)用示例詳解

    這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • vue實(shí)現(xiàn)條件疊加搜索的解決方法

    vue實(shí)現(xiàn)條件疊加搜索的解決方法

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)條件疊加搜索的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • vue.js  父向子組件傳參的實(shí)例代碼

    vue.js 父向子組件傳參的實(shí)例代碼

    這篇文章主要介紹了vue.js 父向子組件傳參的實(shí)例代碼,需要的朋友可以參考下
    2017-10-10
  • 富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展

    富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展

    這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • Vue中導(dǎo)入excel文件的兩種方式及使用步驟

    Vue中導(dǎo)入excel文件的兩種方式及使用步驟

    這篇文章主要介紹了Vue中導(dǎo)入excel文件的兩種方式,大概有兩種導(dǎo)入文件的方法:form表單和el-upload,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • Vuex中g(shù)etters和actions的使用補(bǔ)充說明

    Vuex中g(shù)etters和actions的使用補(bǔ)充說明

    這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡要說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步
    2021-09-09
  • WebSocket使用以及在vue如何使用問題

    WebSocket使用以及在vue如何使用問題

    這篇文章主要介紹了WebSocket使用以及在vue如何使用問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果

    基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果

    這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件,可以控制只顯示省級或只顯示省市兩級,可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù),適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下
    2018-11-11

最新評論