Vue科學(xué)計(jì)數(shù)法常見處理方法舉例
一、Vue之Number
在Vue中，可以使用JavaScript的內(nèi)置Number對(duì)象來進(jìn)行數(shù)字相關(guān)的操作和轉(zhuǎn)換。
1、常見的Number對(duì)象的用法示例
<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ù)，并返回一個(gè)字符串。
- parseFloat()：將字符串解析為浮點(diǎn)數(shù)。
- parseInt()：將字符串解析為整數(shù)。
- isFinite()：檢查一個(gè)值是否為有限數(shù)。
- isNaN()：檢查一個(gè)值是否為NaN。
在計(jì)算屬性formattedNumber中，我們將這些方法應(yīng)用到number數(shù)據(jù)上，并返回一個(gè)包含了格式化、保留小數(shù)、解析字符串、檢查數(shù)值的結(jié)果的字符串。
請(qǐng)注意，這只是一些Number對(duì)象的用法示例，你可以根據(jù)自己的需求進(jìn)行修改和擴(kuò)展。
二、Vue 科學(xué)計(jì)數(shù)法互相轉(zhuǎn)換
在Vue中，可以使用JavaScript的內(nèi)置方法toExponential()來處理科學(xué)計(jì)數(shù)法，并結(jié)合toFixed()方法來保留指定小數(shù)位數(shù)。
以下是一個(gè)示例代碼，將科學(xué)計(jì)數(shù)法轉(zhuǎn)換為對(duì)應(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é)計(jì)數(shù)法
return scientificNotation;
},
},
};
</script>在上述示例中，number的初始值為科學(xué)計(jì)數(shù)法表示的數(shù)字1.23e+6。通過toFixed(2)方法，我們將其轉(zhuǎn)換為具有兩位小數(shù)的字符串"1230000.00"。然后，使用Number()將其轉(zhuǎn)換回?cái)?shù)字，并使用toExponential()方法將其轉(zhuǎn)換為科學(xué)計(jì)數(shù)法表示的字符串"1.23e+6"。
在模板中，我們通過formattedNumber計(jì)算屬性將格式化后的科學(xué)計(jì)數(shù)法字符串顯示出來。
請(qǐng)注意，這只是一個(gè)示例，你可以根據(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ù)字，并且不會(huì)將其轉(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ù)字就不會(huì)以科學(xué)記數(shù)法的形式進(jìn)行顯示。
總結(jié)
到此這篇關(guān)于Vue科學(xué)計(jì)數(shù)法常見處理方法的文章就介紹到這了,更多相關(guān)Vue科學(xué)計(jì)數(shù)法舉例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個(gè)js對(duì)象，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)，如data、components、methods 、created、computed等等2022-09-09
element el-tree組件的動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了element el-tree組件的動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue Vine實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點(diǎn)是可以在一個(gè)文件里面寫多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件,感興趣的朋友一起看看吧2024-07-07
vue for循環(huán)出來的數(shù)據(jù)實(shí)現(xiàn)用逗號(hào)隔開
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,正確的HTML編碼和結(jié)構(gòu)對(duì)于網(wǎng)頁的正確顯示至關(guān)重要,當(dāng)HTML代碼正確無誤時(shí),網(wǎng)頁的效果圖將與設(shè)計(jì)師的預(yù)期相符,反之則可能出現(xiàn)布局錯(cuò)亂、樣式失效等問題2024-10-10
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動(dòng)編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue深復(fù)制的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
這篇文章主要介紹了使用table做成樹形結(jié)構(gòu)的table問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02