Vue计算两数相加

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>两个整数相加，双向绑定</title>
	<script type="text/javascript" src="Vue.js"></script>
	<style type="text/css">
		input{
			display: inline-block;
			width: 50px;text-indent: 0.2em;
		}
	</style>
</head>
<body>
	<!-- 在当前页面中创建一个挂载点 -->
	<div id="box">
		计算两数的和：
		<input type="text" v-model="num">
		<span>+</span>
		<input type="text" v-model="nums">
		= <span>{{sum}}</span>
	</div>

	<script type="text/javascript">
		// 创建Vue的实例
		new Vue({
			// 第一个属性绑定一个挂载点
			el:'#box', //用ID选定
			// 创建了一个数据模型
			data:{
				num:0,
				nums:0,
				sum:0,				
			},
			// watch 监听器属性，监听页面中变量值的变化
			watch:{
				num:function() {
					this.sum = parseFloat(this.num) + parseFloat(this.nums);
				},
				nums:function(){
					this.sum = parseFloat(this.nums) + parseFloat(this.num);
				}
			}
		});
	</script>
</body>
</html>
相关文章
