前端處理一些金額，數(shù)字類的數(shù)據(jù)要求按照固定的格式顯示，比如9,527,025，或者帶有小數(shù)（如1,587.23）仍要三位一斷。有些話也不必多說，既然要求如此，實(shí)現(xiàn)唄。
作為前端主流框架之一的Vue，類似的功能肯定都有人寫的很完善了。我呢，最討厭不動腦筋去網(wǎng)上找現(xiàn)成的，所以我自己寫了一個。話不多說，先放效果圖再貼代碼(為了展現(xiàn)思路，我面向過程寫的，另外這個是針對保留兩位小數(shù)的數(shù)字進(jìn)行過濾，因?yà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ù)的浮點(diǎn)數(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) { //補(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自定義過濾器格式化數(shù)字三位加一逗號實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
