Vue实现在两个input中分别输入数据，在第三个input中动态得出前两者的结果

效果图：在“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>