一、Vue之Number

在Vue中，可以使用JavaScript的內(nèi)置Number對(duì)象來(lái)進(jìn)行數(shù)字相關(guān)的操作和轉(zhuǎn)換。

1、常見(jiàn)的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()來(lái)處理科學(xué)計(jì)數(shù)法，并結(jié)合toFixed()方法來(lái)保留指定小數(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。通過(guò)toFixed(2)方法，我們將其轉(zhuǎn)換為具有兩位小數(shù)的字符串"1230000.00"。然后，使用Number()將其轉(zhuǎn)換回?cái)?shù)字，并使用toExponential()方法將其轉(zhuǎn)換為科學(xué)計(jì)數(shù)法表示的字符串"1.23e+6"。

在模板中，我們通過(guò)formattedNumber計(jì)算屬性將格式化后的科學(xué)計(jì)數(shù)法字符串顯示出來(lái)。

請(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、查詢(xún)通過(guò)率

//通過(guò)率
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ù)法常見(jiàn)處理方法的文章就介紹到這了,更多相關(guān)Vue科學(xué)計(jì)數(shù)法舉例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論