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如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue如何解决子组件data从props中无法动态更新数据问题
这篇文章主要介绍了Vue如何解决子组件data从props中无法动态更新数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue3中使用混入(Mixin)的示例详解
混入（Mixin）是 Vue 中一种代码复用的模式,允许将组件的选项抽离为独立模块,下面就跟随小编一起来深入了解下如何在Vue3中使用混入Mixin吧
2025-03-03
解决vue的touchStart事件及click事件冲突问题
这篇文章主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧
2019-04-04
vue3+vue-cli4中使用svg的方式详解(亲测可用)
最近在做个vue的项目,从各种github上的开源库上借鉴开发方法,给大家分享下,这篇文章主要给大家介绍了关于vue3+vue-cli4中使用svg的相关资料,需要的朋友可以参考下
2022-08-08
五分钟搞懂Vuex实用知识(小结)
本篇文章主要介绍了五分钟搞懂Vuex实用知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
Vue拦截器原理以及详细使用方法
这篇文章主要给大家介绍了关于Vue拦截器原理以及详细使用的相关资料,Vue拦截器通常用于在发送请求或响应数据时对其进行一些处理或修改,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-08-08
实例教学如何写vue插件
本次小编通过一个简单的实例来教给大家如何写一个vue插件，以及需要注意的地方，如果有需要的读者跟着学习一下吧。
2017-11-11
web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答
这篇文章主要介绍了web面试中常问问题，MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答，有需要的朋友可以借鉴参考下，希望能够有所帮助
2021-09-09