前端處理一些金額,數(shù)字類的數(shù)據(jù)要求按照固定的格式顯示,比如9,527,025,或者帶有小數(shù)(如1,587.23)仍要三位一斷。有些話也不必多說,既然要求如此,實現(xiàn)唄。
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)龍州免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
作為前端主流框架之一的Vue,類似的功能肯定都有人寫的很完善了。我呢,最討厭不動腦筋去網(wǎng)上找現(xiàn)成的,所以我自己寫了一個。話不多說,先放效果圖再貼代碼(為了展現(xiàn)思路,我面向過程寫的,另外這個是針對保留兩位小數(shù)的數(shù)字進行過濾,因為保留整數(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"> <h5>說明:這個版本是針對保留兩位小數(shù)的浮點數(shù)進行過濾格式化的</h5> <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ù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)頁名稱:Vue自定義過濾器格式化數(shù)字三位加一逗號實現(xiàn)代碼
文章URL:http://vcdvsql.cn/article48/gdioep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司、網(wǎng)站營銷、微信小程序、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)