vue之保留小數(shù)點兩位小數(shù) 使用filters(過濾器)
更新時間：2023年11月18日 09:38:36 作者：Cherry?
這篇文章主要介紹了vue之保留小數(shù)點兩位小數(shù) 使用filters(過濾器),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
保留小數(shù)點兩位小數(shù) 使用filters(過濾器)
filters: {
numFilter(value) {
let realVal = "";
if (!isNaN(value) && value !== "") {
// 截取當前數(shù)據到小數(shù)點后兩位,改變toFixed的值即可截取你想要的數(shù)值
realVal = parseFloat(value).toFixed(2);
} else {
realVal = "--";
}
return realVal;
},
},
<!--在雙括號中這樣使用即可-->
<div class="col">{{item.dataToday | numFilter}}</div>
toFixed()
把數(shù)字轉換為字符串，結果的小數(shù)點后有指定位數(shù)的數(shù)字
parseFloat()
函數(shù)可解析一個字符串，并返回一個浮點數(shù)。該函數(shù)指定字符串中的首個字符是否是數(shù)字。
如果是，則對字符串進行解析，直到到達數(shù)字的末端為止，然后以數(shù)字返回該數(shù)字，而不是作為字符串。
另注意：
- 字符串中只返回第一個數(shù)字
- 開頭和結尾的空格是允許的
- 如果字符串的第一個字符不能被轉換為數(shù)字，那么 parseFloat() 會返回 NaN
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于Vue如何啟動項目的相關資料,還介紹了解決vue啟動項目時間很長問題的相關方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據問題
這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
混入（Mixin）是?Vue?中一種代碼復用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.js + Nuxt.js 項目中使用 Vee-validate 表單校驗
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內容并顯示對應的錯誤提示信息。這篇文章給大家?guī)砹薞ue.js 使用 Vee-validate 實現(xiàn)表單校驗的相關知識，感興趣的朋友一起看看吧2019-04-04
vue3+vue-cli4中使用svg的方式詳解(親測可用)
最近在做個vue的項目,從各種github上的開源庫上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關于vue3+vue-cli4中使用svg的相關資料,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了五分鐘搞懂Vuex實用知識，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要給大家介紹了關于Vue攔截器原理以及詳細使用的相關資料,Vue攔截器通常用于在發(fā)送請求或響應數(shù)據時對其進行一些處理或修改,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
本次小編通過一個簡單的實例來教給大家如何寫一個vue插件，以及需要注意的地方，如果有需要的讀者跟著學習一下吧。2017-11-11
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問問題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09