vue貨幣格式化組件、局部過濾功能以及全局過濾功能

1、在這裏介紹一個vue的時間格式化插件: moment　

使用方法： 
1.npm install moment --save2.

  2 定義時間格式化全局過濾器

　　在main.js中 導入組件

　　import moment from 'moment'

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

　　})

　　filter兩個參數 第一個是函數名  第二個是時間格式化處理的函數

 

3 只須要在須要格式化時間的地方使用插值表達式就OK了

  <!-- 子標題 -->
      <p class="subtitle">
          <span>發表時間：{{ newsinfo.add_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
          <span>點擊{{ newsinfo.click }}次</span>
     </p>

第二種方法 

引入moment.js

<script>

let moment = require("moment");

 

export default {

data() {

return {

}

能夠直接使用了

if(this.ruleForm2.startTime == '' || this.ruleForm2.startTime == null || this.ruleForm2.startTime == undefined){

this.ruleForm2.startTime = ''

}else {

this.ruleForm2.startTime = moment(this.ruleForm2.startTime).format('YYYY-MM-DD')

}

若是是想要 轉化爲年月日分秒

this.ruleForm2.startTime = moment(this.ruleForm2.startTime).format('YYYY-MM-DD HH-mm'）

</script>

 

2、貨幣格式化　

在頁面中，例如價格數據，無論是後臺傳遞過來的仍是前臺計算以後顯示在頁面上的，通常都只是一個數字沒有格式，完整的格式應該是

要實現這個其實很簡單，vue的過濾功能就很好的能解決這個問題，什麼叫作過濾，就是將元數據進行相應的處理在顯示出來。

首先創建一個 js 文件 currency.js

const digitsRE = /(\d{3})(?=\d)/g

/**
* value  金額
* currency 貨幣符號
* decimals  保留位數
*/
export function currency (value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

一、局部過濾，全局不使用，在某一個頁面使用

引入：

import {currency} from '@/unit/currency';

這個文件是有返回值的，必須這樣引入，而且他不是默認拋出的

js中寫法：

filters:{
        currency: currency
    },

頁面中須要 價格 格式化的地方寫法

{{totalPrice | currency('$')}}

二、全局引入，在任何地方都能使用。

在main.js 中導入，並

Vue.filter("currency", currency);

這裏 必定不能加 ()，加了就成了函數執行了

這樣在全局任何地方均可以使用了。