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