摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两个整数相加的小案例</title>
<style>
#box input{
height:15px;
width: 30px;
}
</style>
</head>
<body>
<!-- 创建一个挂载点 -->
<div id="box">
<input type="number" v-model.number="numb1">+<input type="number" v-model.number="numb2">=<span>{{sum}}</span>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
// 绑定挂载点
el:'#box',
//创建一个数据模型
data:{
numb1:'',
numb2:'',
},
//计算属性
computed:{
sum:function(){
return this.numb1+this.numb2;
}
}
})
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2019-03-19 15:49:06
老师总结：这种双向数据绑定是MVVM模式的基础,功能强大, 应用广泛
