Vue科學(xué)計數(shù)法常見處理方法舉例
一、Vue之Number
在Vue中，可以使用JavaScript的內(nèi)置Number對象來進(jìn)行數(shù)字相關(guān)的操作和轉(zhuǎn)換。
1、常見的Number對象的用法示例
<template>
<div>
<p>{{ formattedNumber }}</p>
</div>
</template>
<script>
export default {
data() {
return {
number: 123456.789,
};
},
computed: {
formattedNumber() {
const formatted = Number(this.number).toLocaleString(); // 格式化為帶千分位的字符串
const rounded = Number(this.number).toFixed(2); // 保留兩位小數(shù)
const parsed = Number.parseFloat("3.14"); // 解析字符串為浮點(diǎn)數(shù)
const intValue = Number.parseInt("42"); // 解析字符串為整數(shù)
const isFiniteNumber = Number.isFinite(123); // 檢查是否為有限數(shù)
const isNaNNumber = Number.isNaN(NaN); // 檢查是否為NaN
return `${formatted}, ${rounded}, ${parsed}, ${intValue}, ${isFiniteNumber}, ${isNaNNumber}`;
},
},
};
</script>
2、常用方法和屬性總結(jié)
- toLocaleString()：將數(shù)字格式化為帶有千分位分隔符的字符串。
- toFixed()：將數(shù)字保留指定的小數(shù)位數(shù)，并返回一個字符串。
- parseFloat()：將字符串解析為浮點(diǎn)數(shù)。
- parseInt()：將字符串解析為整數(shù)。
- isFinite()：檢查一個值是否為有限數(shù)。
- isNaN()：檢查一個值是否為NaN。
在計算屬性formattedNumber中，我們將這些方法應(yīng)用到number數(shù)據(jù)上，并返回一個包含了格式化、保留小數(shù)、解析字符串、檢查數(shù)值的結(jié)果的字符串。
請注意，這只是一些Number對象的用法示例，你可以根據(jù)自己的需求進(jìn)行修改和擴(kuò)展。
二、Vue 科學(xué)計數(shù)法互相轉(zhuǎn)換
在Vue中，可以使用JavaScript的內(nèi)置方法toExponential()來處理科學(xué)計數(shù)法，并結(jié)合toFixed()方法來保留指定小數(shù)位數(shù)。
以下是一個示例代碼，將科學(xué)計數(shù)法轉(zhuǎn)換為對應(yīng)保留兩位小數(shù)的字符串：
<template>
<div>
<p>{{ formattedNumber }}</p>
</div>
</template>
<script>
export default {
data() {
return {
number: 1.23e+6,
};
},
computed: {
formattedNumber() {
const decimalNumber = this.number.toFixed(2); // 保留兩位小數(shù)
const scientificNotation = Number(decimalNumber).toExponential(); // 轉(zhuǎn)換為科學(xué)計數(shù)法
return scientificNotation;
},
},
};
</script>在上述示例中，number的初始值為科學(xué)計數(shù)法表示的數(shù)字1.23e+6。通過toFixed(2)方法，我們將其轉(zhuǎn)換為具有兩位小數(shù)的字符串"1230000.00"。然后，使用Number()將其轉(zhuǎn)換回數(shù)字，并使用toExponential()方法將其轉(zhuǎn)換為科學(xué)計數(shù)法表示的字符串"1.23e+6"。
在模板中，我們通過formattedNumber計算屬性將格式化后的科學(xué)計數(shù)法字符串顯示出來。
請注意，這只是一個示例，你可以根據(jù)自己的需求進(jìn)行修改和調(diào)整
三、舉例
1、保留兩位小數(shù)
dealNum(val) {
return (val * 1).toFixed(2);
},2、保留兩位小數(shù)的百分?jǐn)?shù)
dealNum(val) {
return (val * 100).toFixed(2) + "%";
},3、查詢通過率
//通過率
dealNum(passNum, totalNum) {
return (passNum / totalNum).toFixed(2) + "%";
},附：vue3數(shù)字框不轉(zhuǎn)科學(xué)記數(shù)法
要讓Vue3的數(shù)字框不轉(zhuǎn)換成科學(xué)記數(shù)法，可以在輸入框中使用inputmode屬性，并將其設(shè)置為numeric。這將告訴瀏覽器，輸入框中只能輸入數(shù)字，并且不會將其轉(zhuǎn)換成科學(xué)記數(shù)法。例如：
<template>
<div>
<label>Number:</label>
<input type="number" inputmode="numeric" v-model="number">
</div>
</template>
<script>
export default {
data() {
return {
number: null
};
}
};
</script>
這里使用了inputmode屬性，并將其設(shè)置為numeric，這樣輸入框中輸入的數(shù)字就不會以科學(xué)記數(shù)法的形式進(jìn)行顯示。
總結(jié)
到此這篇關(guān)于Vue科學(xué)計數(shù)法常見處理方法的文章就介紹到這了,更多相關(guān)Vue科學(xué)計數(shù)法舉例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了Vue項目中使用xlsx和file-saver庫導(dǎo)出表格數(shù)據(jù)為Excel文件的步驟,包括安裝依賴、引入庫、設(shè)置表格ID、添加導(dǎo)出按鈕以及處理下載等2026-04-04
vue3使用Electron打包成exe的方法與打包報錯解決
在前端開發(fā)中,Electron是一種常用的工具,它允許開發(fā)者使用Web技術(shù)構(gòu)建桌面應(yīng)用程序,本文主要介紹了vue3使用Electron打包成exe的方法與打包報錯解決,具有一定的參考價值,感興趣的可以了解一下2024-06-06
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本文主要介紹了element中el-table與el-form同用并校驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合，vue.js有配套的第三方類庫，可以整合起來做大型項目的開發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
文章介紹了一個使用Vue和Element UI僅在前端實現(xiàn)增刪改功能的示例,未涉及后端知識,主要分為編輯、新增和刪除方法,并提供了全部代碼2026-03-03
Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之深度響應(yīng)，文章基于Vue2?響應(yīng)式系統(tǒng)的相關(guān)資料展開對Vue2?深度響應(yīng)的介紹，需要的小伙伴可以參考一下2022-04-04
vue監(jiān)聽路由變化時watch方法會執(zhí)行多次的原因及解決
這篇文章主要介紹了vue監(jiān)聽路由變化時watch方法會執(zhí)行多次的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04