双向绑定实现整数相加

原创 2019-03-01 17:30:42 181
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<input type="text" v-model="number1"/> +
			<input type="text" v-model="number2"/> =
			<span>{{sum}}</span>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				number1:1,
				number2:1,
				equal:2,
			},
//			使用计算属性computed
			computed:{
				sum:function(){
//					number()转为数字,否则为字符串相加
					return Number(this.number1) + Number(this.number2)
				}
			}
		})
	</script>
</html>


批改老师:查无此人批改时间:2019-03-02 09:08:20
老师总结:完成的不错。input框可以禁止输入,这样安全些。继续加油

发布手记

热门词条