【Vue】科学计数法常见处理

目录

一、Vue之Number

1、常见的Number对象的用法示例

2、常用方法和属性总结

[二、Vue 科学计数法互相转换](#二、Vue 科学计数法互相转换)

三、举例

1、保留两位小数

2、保留两位小数的百分数

3、查询通过率

四、往期相关优质推荐


一、Vue之Number

在Vue中,可以使用JavaScript的内置Number对象来进行数字相关的操作和转换。

1、常见的Number对象的用法示例

javascript 复制代码
<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); // 保留两位小数
      const parsed = Number.parseFloat("3.14"); // 解析字符串为浮点数
      const intValue = Number.parseInt("42"); // 解析字符串为整数
      const isFiniteNumber = Number.isFinite(123); // 检查是否为有限数
      const isNaNNumber = Number.isNaN(NaN); // 检查是否为NaN
      return `${formatted}, ${rounded}, ${parsed}, ${intValue}, ${isFiniteNumber}, ${isNaNNumber}`;
    },
  },
};
</script>

2、常用方法和属性总结

  • toLocaleString():将数字格式化为带有千分位分隔符的字符串。
  • toFixed():将数字保留指定的小数位数,并返回一个字符串。
  • parseFloat():将字符串解析为浮点数。
  • parseInt():将字符串解析为整数。
  • isFinite():检查一个值是否为有限数。
  • isNaN():检查一个值是否为NaN。

在计算属性formattedNumber中,我们将这些方法应用到number数据上,并返回一个包含了格式化、保留小数、解析字符串、检查数值的结果的字符串。

请注意,这只是一些Number对象的用法示例,你可以根据自己的需求进行修改和扩展。

二、Vue 科学计数法互相转换

在Vue中,可以使用JavaScript的内置方法toExponential()来处理科学计数法,并结合toFixed()方法来保留指定小数位数。

以下是一个示例代码,将科学计数法转换为对应保留两位小数的字符串:

javascript 复制代码
<template>
  <div>
    <p>{{ formattedNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1.23e+6,
    };
  },
  computed: {
    formattedNumber() {
      const decimalNumber = this.number.toFixed(2); // 保留两位小数
      const scientificNotation = Number(decimalNumber).toExponential(); // 转换为科学计数法
      return scientificNotation;
    },
  },
};
</script>

在上述示例中,number的初始值为科学计数法表示的数字1.23e+6。通过toFixed(2)方法,我们将其转换为具有两位小数的字符串"1230000.00"。然后,使用Number()将其转换回数字,并使用toExponential()方法将其转换为科学计数法表示的字符串"1.23e+6"。

在模板中,我们通过formattedNumber计算属性将格式化后的科学计数法字符串显示出来。

请注意,这只是一个示例,你可以根据自己的需求进行修改和调整

三、举例

1、保留两位小数

javascript 复制代码
    dealNum(val) {
      return (val * 1).toFixed(2);
    },

2、保留两位小数的百分数

javascript 复制代码
    dealNum(val) {
      return (val * 100).toFixed(2) + "%";
    },

3、查询通过率

javascript 复制代码
//通过率
dealNum(passNum,  totalNum) {
   return (passNum / totalNum).toFixed(2) + "%";
},

四、往期相关优质推荐

|--------------------------------------------------------------------------------------------------------------------------------|
| VSCode 最全实用插件(VIP典藏版) |
| Vue超详细整理(VIP典藏版) |
| Vue中created,mounted,updated详解 |
| 一文快速上手Echarts(持续更新) |
| Vue中el-table数据项扩展各种类型总结(持续更新) |

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

相关推荐
花海少爷3 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7947 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You16 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生27 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410929 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap41 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript