vue可以通过watch来监听属性值的变化。
这是一个计算人民币对美元汇率的例子 <script src="http://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率: <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
¥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: <input type="number" v-model.number = "dollar" />
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0,
dollar:0
},
watch:{
rmb:function(val) {
this.rmb = val;
this.dollar = this.rmb / this.exchange;
},
dollar:function(val) {
this.dollar = val;
this.rmb = this.dollar * this.exchange;
},
}
})
</script>
HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。
![]()
问答区域
2018-11-18
使用当前汇率计算有bug
2018-09-06
一个诡异的bug
4 个答案
七哥哥 跳转到问题位置 答案时间:2018-12-12 可能是因为顺序得问题,当先填写美元后,,计算出一个RMB,,,然后根据这个RMB又计算了美元?
wdk_123 跳转到问题位置 答案时间:2018-11-17 主要是汇率6.4的缘故,你把6.4改成一个整数看看还会不会是有这个bug,还有一个原因,因为6.4已经导致多位小数的发生,所以是rmb先发生多位小数再引起dollar多为、位小数的发生,我觉得站长这里应该对数值进行强转,避免很长的小数位的发生。
frog2 跳转到问题位置 答案时间:2018-10-30 什么原因啊?
HonoSV 跳转到问题位置 答案时间:2018-10-30 我也发现了。。。。
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2018-07-26
function(val)把val去掉也可以
2018-07-25
为什么输入有些数字计算有偏差,后面多了好多
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|