作业作业作业作业作业作业作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向更新数据</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div id="box" v-bind:style="boxStyle">
<p v-bind:style="pStyle">{{number}}</p>
<input type="number" v-bind:style="[inputStyle,mgBt]" v-model="number1"><br>
<input type="number" v-bind:style="inputStyle" v-model="number2">
</div>
<script src="unit11/vue.js"></script>
<script>
var vm = new Vue({
el:'#box',
data:{
number:0,
number1:0,
number2:0,
boxStyle:{width:'200px',border:'1px solid #ccc',margin:'200px auto',textAlign:'center',padding:'10px'},
pStyle:{fontSize:'24px',color:'red',marginBottom:'10px'},
inputStyle:{padding:'4px 8px'},
mgBt:{marginBottom:'10px'}
},
watch:{
number1:function(val){
this.number = parseInt(val) + parseInt(this.number2);
},
number2:function(val){
this.number = parseInt(val) + parseInt(this.number1);
},
}
});
</script>
</body>
</html>