vue貨幣格式化組件、局部過濾功能以及全局過濾功能
阿新 • • 發佈:2018-01-28
解決 sre enc 個數 成了 fix 執行 main int
在頁面中,例如價格數據,不管是後臺傳遞過來的還是前臺計算之後顯示在頁面上的,一般都只是一個數字沒有格式,完整的格式應該是
要實現這個其實很簡單,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 % 3var 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 }
1、局部過濾,全局不使用,在某一個頁面使用
引入:
import {currency} from ‘@/unit/currency‘; 這個文件是有返回值的,必須這樣引入,並且他不是默認拋出的
js中寫法:
filters:{
currency: currency
},
頁面中需要 價格 格式化的地方寫法
{{totalPrice | currency(‘$‘)}}
2、全局引入,在任何地方都能使用。
在main.js 中導入,並
Vue.filter("currency", currency);
這裏 一定不能加 (),加了就成了函數執行了
這樣在全局任何地方都可以使用了。
vue貨幣格式化組件、局部過濾功能以及全局過濾功能