Vue如何將過濾器格式化
这次给大家带来Vue如何将过滤器格式化，Vue将过滤器格式化的注意事项有哪些，下面就是实战案例，一起来看一下。
前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。
作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Vue数字过滤器逢三一断</title>
</head>
<body>
<p id="app">
<h4>说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4>
<input type="number" v-model="num" />
<p>{{num|NumFormat}}</p>
</p>
</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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Vue如何將過濾器格式化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
dos指令怎麼格式化c盤
Feb 19, 2024 pm 04:23 PM
DOS命令是Windows作業系統中使用的命令列工具，它可以用來執行各種系統管理任務和操作。其中一個常用的任務是格式化硬碟，包括C碟。格式化C碟是一個比較危險的操作，因為它將會清除C碟上的所有數據，並將檔案系統重新初始化。在執行這個操作之前，請確保你已經備份了重要的文件，並且清楚地了解格式化操作對你的電腦會產生的影響。下面是在DOS命令列中格式化
光碟格式化是什麼
Aug 17, 2023 pm 04:02 PM
光碟格式化是指將光碟的檔案系統重建和清空的過程，在光碟格式化過程中，所有的資料都會被徹底刪除，同時檔案系統會被重新建立，以便在光碟上重新儲存資料。光碟格式化可用於保護資料安全、修復光碟故障和清除病毒等目的，在進行光碟格式化時，需要備份重要資料、選擇適當的檔案系統，並耐心等待格式化完成。
為什麼d磁碟無法格式化
Aug 30, 2023 pm 02:39 PM
d碟無法格式化的原因有該碟正在被其他程式或行程使用、該磁碟上有損壞的檔案系統、硬碟故障和權限問題的。詳細介紹：1、D磁碟無法格式化可能是因為該磁碟正在被其他程式或進程使用，在Windows作業系統中，如果有程式正在存取D磁碟上的檔案或資料夾，系統將無法執行格式化操作；2、D碟無法格式化可能是因為該碟上有損壞的檔案系統，檔案系統是作業系統用來組織和管理儲存裝置上的檔案和資料夾的等等。
手機格式化恢復方法大揭密（手機故障？別急）
May 04, 2024 pm 06:01 PM
現今，無法開機等，卡頓，我們難免會遇到一些問題，例如係統崩潰、但在使用過程中、手機已成為我們生活中不可或缺的一部分。我們往往束手無策、有時、對於這些問題的解決方法。幫助你解決手機故障，本文將為大家介紹一些手機格式化恢復的方法、讓手機重新恢復正常運作。備份資料－保護重要資訊安全通訊錄等，如照片、聯絡人、以免在格式化過程中遺失、在進行手機格式化之前、首先要考慮的是備份手機上的重要資料和檔案。確保資料的安全性、或選擇將檔案傳輸至雲端儲存服務中，可以透過連接電腦進行備份。使用系統自備恢復功能－簡
簡單有效的步驟來解決0x80070057錯誤
Dec 27, 2023 am 08:38 AM
如何解決0x80070057錯誤：簡單有效的方法與步驟引言：在使用計算機的過程中，我們有時會遇到各種各樣的錯誤代碼。其中，0x80070057是一個非常常見的錯誤代碼，它通常與Windows作業系統相關。這個錯誤代碼可能出現在不同的情況下，例如在安裝或更新作業系統、備份或還原檔案以及格式化磁碟機時等。儘管這個錯誤代碼很令人沮喪，但它並不是無法解決的。本文將介
使用fmt.Sprint函數將多個值格式化為字串並返回，包括類型訊息
Jul 25, 2023 am 09:01 AM
使用fmt.Sprint函數將多個值格式化為字串並返回，包括類型資訊在Go語言中，fmt套件提供了許多函數用於將資料格式化為字串。其中，fmt.Sprint函數可以將多個值格式化為字串並傳回。與fmt.Sprintf函數不同的是，fmt.Sprint函數傳回一個字串，而不是一個格式化後的字串。下面是一個使用fmt.Sprint函數的簡單範例程式碼：pa
格式化筆記型電腦會使其速度更快嗎？
Feb 12, 2024 pm 11:54 PM
格式化筆記型電腦會使其速度更快嗎？如果您想格式化您的Windows筆記型電腦，但想知道它是否會使速度更快，本文將幫助您了解這個問題的正確答案。格式化筆記型電腦會使其速度更快嗎？使用者格式化Windows筆記型電腦的原因有很多。但最常見的原因是筆記型電腦的效能或速度緩慢。格式化筆記型電腦會徹底刪除C碟或安裝Windows作業系統的硬碟分割區上儲存的所有資料。因此，每個用戶在採取這一步驟之前都會三思而後行，尤其是在筆記型電腦的性能方面。本文將幫助您了解格式化筆記型電腦是否會加快速度。格式化筆記型電腦有助於
電腦格式化教程
Jan 08, 2024 am 08:21 AM
在使用電腦的時候很多時候都會遇到垃圾過多的情況，但是很多的用戶還不知道電腦怎麼格式化，沒關係，下面就給你們大家帶來了電腦格式化的教程一起看看吧。電腦怎麼格式化：1、右鍵點選桌面的「此電腦」點選「管理」。 2.在「電腦管理」中點選「儲存」開啟「磁碟管理」。 3、選擇自己要清理的硬碟右鍵選擇「格式化」。 4、勾選「執行快速格式化」並點選「確定」即可開始格式化。
