要在 Vue 模板中显示数字并保留两位小数

最新推荐文章于 2024-02-28 09:38:25 发布

原创最新推荐文章于 2024-02-28 09:38:25 发布

· 1.4k 阅读

2 ·

版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue模板中使用JavaScript的toFixed方法来确保数字显示两位小数，同时处理undefined或null值的情况。示例展示了如何结合parseFloat和三元表达式实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有保留两位的代码和效果

<view class="form-row">
        <view class="form-row-tt">已累计收益（红利＋SQT）</view>
        <view class="form-row-dd">{{data.userAccountVo.accumulated}}</view>
      </view>

变成两位小数点的步骤：

要在 Vue 模板中显示数字并保留两位小数，您可以使用 JavaScript 的 toFixed 方法。toFixed 方法可以将数字转换为字符串并保留到指定的小数位数。在您的情况下，如果 data.userAccountVo.accumulated 是一个数字，您可以这样做：

<view class="form-row-dd">{{ parseFloat(data.userAccountVo.accumulated).toFixed(2) }}元</view>

这里的 parseFloat 确保 data.userAccountVo.accumulated 被视为一个数字，然后 toFixed(2) 会将这个数字格式化为保留两位小数的字符串。

请注意，如果 data.userAccountVo.accumulated 可能是 undefined 或 null，您可能需要添加一些额外的检查以避免运行时错误。例如：

<view class="form-row-dd">
    {{ data.userAccountVo.accumulated != null ? parseFloat(data.userAccountVo.accumulated).toFixed(2) : '0.00' }}元
</view>

在这个例子中，如果 data.userAccountVo.accumulated 为 null 或 undefined，则默认显示 "0.00"。

效果和代码：

	<view class="form-row">
				<view class="form-row-tt">已累计收益（红利＋SQT）:</view>
				<view class="form-row-dd">{{ data.userAccountVo.accumulated != null ? parseFloat(data.userAccountVo.accumulated).toFixed(2) : '0.00' }}元</view>
			</view>