vue之保留小数点两位小数 使用filters(过滤器)

 更新时间:2023年11月18日 09:38:36   作者:Cherry☼  
这篇文章主要介绍了vue之保留小数点两位小数 使用filters(过滤器),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

保留小数点两位小数 使用filters(过滤器)

filters: {
   numFilter(value) {
     let realVal = "";
     if (!isNaN(value) && value !== "") {
       // 截取当前数据到小数点后两位,改变toFixed的值即可截取你想要的数值
       realVal = parseFloat(value).toFixed(2);
     } else {
       realVal = "--";
     }
     return realVal;
   },
 },
<!--在双括号中这样使用即可-->
<div class="col">{{item.dataToday | numFilter}}</div>

toFixed()

把数字转换为字符串,结果的小数点后有指定位数的数字

parseFloat()

函数可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。

如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

另注意:

  • 字符串中只返回第一个数字
  • 开头和结尾的空格是允许的
  • 如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue添加请求拦截器及vue-resource 拦截器使用

    Vue添加请求拦截器及vue-resource 拦截器使用

    这篇文章主要介绍了Vue添加请求拦截器及vue-resource 拦截器使用,需要的朋友可以参考下
    2017-11-11
  • VSCode开发UNI-APP 配置教程及插件

    VSCode开发UNI-APP 配置教程及插件

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,今天通过本文给大家分享VSCode开发UNI-APP 配置教程及插件推荐与注意事项,感兴趣的朋友一起看看吧
    2021-08-08
  • vue通过element树形控件实现树形表格

    vue通过element树形控件实现树形表格

    这篇文章主要为大家介绍了vue element树形控件实现树形表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue使用MD5对前后端进行加密的实现

    Vue使用MD5对前后端进行加密的实现

    前后端分离的项目,遇到了对密码进行加密的情况,在前端或者是在后端加密都是可以的,本文主要介绍了Vue使用MD5对前后端进行加密的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    这篇文章主要介绍了Vue使用el-input自动获取焦点和二次获取焦点问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue3管理后台项目使用高德地图选点的实现

    Vue3管理后台项目使用高德地图选点的实现

    本文主要介绍了Vue3管理后台项目使用高德地图选点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue中如何防止用户频繁点击按钮详解

    vue中如何防止用户频繁点击按钮详解

    在后台使用过程中经常会因为按钮重复点击,而造成发送多次重复请求 以下方法可以避免这种情况,下面这篇文章主要给大家介绍了关于vue中如何防止用户频繁点击按钮的相关资料,需要的朋友可以参考下
    2022-09-09
  • 一篇文章带你搞懂Vue虚拟Dom与diff算法

    一篇文章带你搞懂Vue虚拟Dom与diff算法

    这篇文章主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 详解Vue中Axios封装API接口的思路及方法

    详解Vue中Axios封装API接口的思路及方法

    这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue和react等项目中更简单的实现展开收起更多等效果示例

    vue和react等项目中更简单的实现展开收起更多等效果示例

    这篇文章主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02

最新评论