免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Vue自定義過濾器格式化數字三位加一逗號實現代碼

前端處理一些金額，數字類的數據要求按照固定的格式顯示，比如9,527,025，或者帶有小數（如1,587.23）仍要三位一斷。有些話也不必多說，既然要求如此，實現唄。

專注于為中小企業提供成都網站制作、成都網站建設、外貿營銷網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業龍州免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了成百上千企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

Vue自定義過濾器格式化數字三位加一逗號實現代碼

作為前端主流框架之一的Vue，類似的功能肯定都有人寫的很完善了。我呢，最討厭不動腦筋去網上找現成的，所以我自己寫了一個。話不多說，先放效果圖再貼代碼(為了展現思路，我面向過程寫的，另外這個是針對保留兩位小數的數字進行過濾，因為保留整數的太簡單了)。

Vue自定義過濾器格式化數字三位加一逗號實現代碼

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Vue數字過濾器逢三一斷</title>
 </head>
 <body>
  <div id="app">
   <h5>說明：這個版本是針對保留兩位小數的浮點數進行過濾格式化的</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); //獲取整數部分
   var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //將整數部分逢三一斷
   var floatPart = ".00"; //預定義小數部分
   var value2Array = value.split(".");
   //=2表示數據有小數位
   if(value2Array.length == 2) {
    floatPart = value2Array[1].toString(); //拿到小數部分
    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>

總結

以上所述是小編給大家介紹的Vue自定義過濾器格式化數字三位加一逗號實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網頁名稱：Vue自定義過濾器格式化數字三位加一逗號實現代碼
文章URL：http://m.newbst.com/article48/gdioep.html

成都網站建設公司_創新互聯，為您提供網站內鏈、網站設計公司、網站營銷、微信小程序、動態網站、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

商城網站建設