效果图:在“1”,“2”中输入,3中得到1和2的乘积。
代码:
头部要引入vue.js库, ,并给需要绑定的input加上v-model属性。
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<div class="modal-body">
<form action="${basePath}/goodlist" method="post" id="addForm">
<input type="text" name="goodPrice" placeholder="请输入货物单价:" v-model="price" id="goodPrice"><br/>
<input type="text" name="goodNum" placeholder="请输入货物数量:" v-model="goodNum" id="goodNum" onfocus="Calculated()"><br/>
<input type="text" name="goodNumPrice" id="goodNumPrice" v-model="Calculated" placeholder="货位总价值为:" readonly="readonly">
</form>
</div>
<script type = "text/javascript">
var vm = new Vue({
el:'#addForm', //选取元素id的“#“容易漏掉
data:{
price:'',
goodNum:'',
Calculated:''
},
watch:{
goodNum : function(val) { //监听goodNum的值,参数val代表其值,若goodNum发生变化,则计算的Calculated值也发生变化。
this.Calculated = parseFloat(this.price)* parseInt(val);
//要判断isNaN这种情况,因为不判断,当price为空时,计算结果将显示NaN,不友好。
if(isNaN(this.Calculated)){
this.Calculated="";
}
},
price : function(val) { //监听price的值,参数val代表其值,若price发生变化,则计算的Calculated值也发生变化。
this.Calculated = parseFloat(val)* parseInt(this.goodNum);
if(isNaN(this.Calculated)){ //同上
this.Calculated="";
}
}
}
});
</script>