v-for 使用 filters 进行数据处理

最新推荐文章于 2024-08-29 21:28:34 发布

原创最新推荐文章于 2024-08-29 21:28:34 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#v-for #filters #四舍五入

前端同时被 3 个专栏收录

65 篇文章

订阅专栏

ES6

20 篇文章

订阅专栏

ES5

8 篇文章

订阅专栏

本文介绍如何在Vue.js中利用自定义过滤器实现数据的四舍五入和保留两位小数的显示效果，通过具体代码示例展示了过滤器的定义和使用过程。

使用filters将数据四舍五入保留两位小数

 <li class="food" v-for="(item,index) in carts">
 	 <div>
		<span style="color: #F03C03"> ￥{{item.price*item.count | filtersValue}}</span>
	</div>
 </li>

//过滤器 toFixed 四舍五入 保留两位
filters:{
	filtersValue:function(value){
		return value.toFixed(2);
},},

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

NumberObject.toFixed(num)

参数	描述
num	必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。