vue配合html中实现四舍五入数值后保留原始数值的方法

在项目开发中，遇到一个需求为：几个input框，有默认值，还可以输入修改，然后在页面展示中要求四舍五入的数值，但是在计算中要求使用原数值进行计算

实现思路：
html配合vue共同实现。
1、先为input设置一个默认值，可以直接用value，也可以使用v-model，默认值直接写为某个数四舍五入后的值，用来显示。
2、在vue中定义一个变量，存储这个input四舍五入前的值，在最开始先给这个变量赋值为默认值的原始数值。
3、为input设置两个监听事件，分别为@input（只要输入值就会触发的事件）、@blur（失去焦点后触发的事件）。
4、在@input事件中实现为定义的变量赋值，这个值就是原始的，没有进行四舍五入的值。
5、在@blur事件中为输入的值进行四舍五入并显示。
6、在点击计算事件中，使用定义的变量来计算，这样就实现了计算和展示互不干扰。
还有个问题就是计算后的值也要进行四舍五入显示，而且这个值还可能会用来计算。我的方法为：
在vue中定义两个变量，一个用来赋值为计算后的原始值（为了以后再用这个值进行计算）。一个赋值为四舍五入后的值，并返回给页面展示
html代码

<div id="app">月工资：<input type="text" autocomplete="off" ref="yueGongZhi" value="3000.24" @input="inYueGongZhi($event)" @blur="noYueGongZhi($event)"> 月消费：<input type="text" autocomplete="off" ref="yueXiaoFei" value="1500.97" @input="inYueXiaoFei($event)" @blur="noYueXiaoFei($event)"><div>每月剩余:<span>{{shengYu}}</span></div><button type="button" @click="jiSuan">计算</button>
</div>

vue中代码

new Vue({el: '#app',data: function() {return {yueGongZhi: 3000.236895,yueXiaoFei: 1500.9734456,shengYu_val: '', //存储计算后的原始值shengYu: '', //存储四舍五入后的值}},methods: {//四舍五入方法siSheWuRu(event) {var val = event.target.value;if (!val) {return;}var b = parseFloat(val);event.target.value = Number(b).toFixed(2);},//保存原始值inYueGongZhi(event) {this.yueGongZhi = this.$refs.yueGongZhi.value;},//显示四舍五入noYueGongZhi(event) {this.siSheWuRu(event);},//保存原始值inYueXiaoFei(event) {this.yueXiaoFei = this.$refs.yueXiaoFei.value;},//显示四舍五入noYueXiaoFei(event) {this.siSheWuRu(event);},//计算jiSuan() {this.shengYu_val = this.yueGongZhi - this.yueXiaoFeithis.shengYu = this.shengYu_val.toFixed(2)}}
})

初始页面

点击计算后页面

但是这样写的话，，每次刷新 {{shengYu}} 都会出来闪一下，影响使用体验，我不知道这个是什么原理。
我的解决方法为先为要显示计算后的元素设置为不可见，点击计算后切换为可见
如下：

<div id="app">月工资：<input type="text" autocomplete="off" ref="yueGongZhi" value="3000.24" @input="inYueGongZhi($event)" @blur="noYueGongZhi($event)"> 月消费：<input type="text" autocomplete="off" ref="yueXiaoFei" value="1500.97" @input="inYueXiaoFei($event)" @blur="noYueXiaoFei($event)"><div>每月剩余:<span id="shengYu_id" style="visibility: hidden;">{{shengYu}}</span></div><button type="button" @click="jiSuan">计算</button>
</div>

new Vue({el: '#app',data: function() {return {yueGongZhi: 3000.236895,yueXiaoFei: 1500.9734456,shengYu_val: '', //存储计算后的原始值shengYu: '', //存储四舍五入后的值}},methods: {//四舍五入方法siSheWuRu(event) {var val = event.target.value;if (!val) {return;}var b = parseFloat(val);event.target.value = Number(b).toFixed(2);},//保存原始值inYueGongZhi(event) {this.yueGongZhi = this.$refs.yueGongZhi.value;},//显示四舍五入noYueGongZhi(event) {this.siSheWuRu(event);},//保存原始值inYueXiaoFei(event) {this.yueXiaoFei = this.$refs.yueXiaoFei.value;},//显示四舍五入noYueXiaoFei(event) {this.siSheWuRu(event);},//计算jiSuan() {this.shengYu_val = this.yueGongZhi - this.yueXiaoFei;this.shengYu = this.shengYu_val.toFixed(2);//显示元素var show = $("#shengYu_id");for (var i = 0; i < show.length; i++) {show[i].style.visibility = 'visible'}}}
})

.
.
.
.
.
感谢阅读，有不足之处欢迎指出，共同探讨

vue配合html中实现四舍五入数值后保留原始数值的方法相关推荐

LI中内容超过长度后以省略号显示的方法
LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li { width:2 ...
vue页面接收后端传递数值后保留两位小数
前提:数值型(这里以float为例) 方法:1) {{ targeValue | numFilter }}filters: {numFilter (value) {let realVal = pa ...
pytest中前置setup和后置teardown的使用方法
前言学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次. 当然还有更高级一点的setupClass和teardownClass,需 ...
vue项目使用 npm run build 打包后出现样式错乱问题解决方法
检查组件内的标签是不是没有加scoped 不加scoped打包后容易引起样式错乱正确规范应该这样 scoped 作用style样式只在本组件内有效,防止别组件类名或标签一样样式冲突.
Windows10系统下从库中删除文件夹（保留原始位置的文件）
通过库-管理库-更改库收集的内容(如下图所示)
注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）
注册/找回密码等功能中发送手机验证码后倒计时效果的实现,基于vue.element-ui <template><el-button size="small" ty ...
Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
为什么wps数字前面有撇号_表格中输入18位超长的数值后变样了? 别急! 两招搞定!...
原标题:表格中输入18位超长的数值后变样了? 别急! 两招搞定! 输入超长的数值,就会显示成奇怪的样子, 好端端的身份证号码全都乱套了,为什么? 怎么办?这就为你解答~ 错误一:输入18位数之后变为含 ...
科学计算机法后保留四位小数,四舍五入（一种精确度的计数保留法）_百度百科...
[sì shě wǔ rù] 四舍五入 (一种精确度的计数保留法) 语音编辑锁定讨论上传视频四舍五入是一种精确度的计数保留法,与其他方法本质相同.但特殊之处在于,采用四舍五入,能使被保留部分 ...

vue配合html中实现四舍五入数值后保留原始数值的方法

在项目开发中，遇到一个需求为：几个input框，有默认值，还可以输入修改，然后在页面展示中要求四舍五入的数值，但是在计算中要求使用原数值进行计算

vue配合html中实现四舍五入数值后保留原始数值的方法相关推荐

最新文章

热门文章