Vue自定義過(guò)濾器格式化數(shù)字三位加一逗號(hào)實(shí)現(xiàn)代碼
更新時(shí)間：2018年03月23日 10:45:21 作者：攝影師夏爾
這篇文章主要介紹了Vue自定義過(guò)濾器格式化數(shù)字三位加一逗號(hào)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
前端處理一些金額，數(shù)字類(lèi)的數(shù)據(jù)要求按照固定的格式顯示，比如9,527,025，或者帶有小數(shù)（如1,587.23）仍要三位一斷。有些話(huà)也不必多說(shuō)，既然要求如此，實(shí)現(xiàn)唄。
作為前端主流框架之一的Vue，類(lèi)似的功能肯定都有人寫(xiě)的很完善了。我呢，最討厭不動(dòng)腦筋去網(wǎng)上找現(xiàn)成的，所以我自己寫(xiě)了一個(gè)。話(huà)不多說(shuō)，先放效果圖再貼代碼(為了展現(xiàn)思路，我面向過(guò)程寫(xiě)的，另外這個(gè)是針對(duì)保留兩位小數(shù)的數(shù)字進(jìn)行過(guò)濾，因?yàn)楸Ａ粽麛?shù)的太簡(jiǎn)單了)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Vue數(shù)字過(guò)濾器逢三一斷</title>
</head>
<body>
<div id="app">
<h4>說(shuō)明：這個(gè)版本是針對(duì)保留兩位小數(shù)的浮點(diǎn)數(shù)進(jìn)行過(guò)濾格式化的</h4>
<input type="number" v-model="num" />
<p>{{num|NumFormat}}</p>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
Vue.filter('NumFormat', function(value) {
if(!value) return '0.00';
var intPart = Number(value).toFixed(0); //獲取整數(shù)部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //將整數(shù)部分逢三一斷
var floatPart = ".00"; //預(yù)定義小數(shù)部分
var value2Array = value.split(".");
//=2表示數(shù)據(jù)有小數(shù)位
if(value2Array.length == 2) {
floatPart = value2Array[1].toString(); //拿到小數(shù)部分
if(floatPart.length == 1) { //補(bǔ)0,實(shí)際上用不著
return intPartFormat + "." + floatPart + '0';
} else {
return intPartFormat + "." + floatPart;
}
} else {
return intPartFormat + floatPart;
}
})
var app = new Vue({
el: "#app",
data: {
num: 0
},
})
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue自定義過(guò)濾器格式化數(shù)字三位加一逗號(hào)實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue初始化中的選項(xiàng)合并之initInternalComponent詳解
這篇文章主要介紹了Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
Vue.js（讀音 /vjuː/, 類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下2017-11-11
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了Vue頭像處理方案，實(shí)現(xiàn)思路主要是通過(guò)獲取后臺(tái)返回頭像url，判斷圖片寬度，高度。具體實(shí)例代碼大家參考下本文2018-07-07
在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue源碼中一些util函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
最近翻閱了一下vue。發(fā)覺(jué)有一個(gè)單文件組件之前基本忽視掉了。所以本文就詳細(xì)的介紹了vue單文件組件的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文詳細(xì)介紹了VueRouter 路由的概念、規(guī)則、基礎(chǔ)等相關(guān)內(nèi)容，文中運(yùn)用大量的圖片進(jìn)行講解，感興趣的小伙伴可以看一看這篇文章2021-08-08
Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12