摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作业：两个整数相加的小案例</title> <script src="js/vue.js" type=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业：两个整数相加的小案例</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.it {outline: none;border:none;border-bottom:1px solid #999;width:1.5rem;font-size:1.4rem;text-align:center}
.sp{padding:.25rem;font-size:1.5rem;}
.title{color:red;}
.tit{color:green;}
</style>
</head>
<body>
<div id="box">
输入运算结果: <input :class="inputStyle" type="text" v-model="num">
<span :class="spanStyle">{{fuHaoAdd}}</span>
<input :class="inputStyle" type="text" v-model="num1" >
<span :class="spanStyle">{{fuHaoDy}}</span>
<span :class="spanStyle">{{add}}</span>
<br>
<h3 v-show="isShow" :class="h3Style">{{msg}}</h3>
</div>
<script type="text/javascript">
new Vue({
el : '#box',
data : {
num : 0,
num1 : 0,
inputStyle : "it",
spanStyle : "sp",
h3Style : "title",
msg : "请输入数字",
isShow : false,
fuHaoAdd : "+",
fuHaoDy : "=",
add : 0 ,
},
// 侦听器
watch: {
// value获取当前值
num : function(value){
this.isShow = true;
//等于
if( !isNaN(value) && !isNaN((this.num1-0)) ){
this.add = (value-0) + (this.num1-0);
this.msg = "正确算出结果: " + this.add;
this.h3Style = "tit";
}else{
this.msg = "确保两个都是数字";
this.h3Style = "title";
this.add = null;
}
},
num1 : function(value){
this.isShow = true;
if( !isNaN(value) && !isNaN((this.num-0)) ){
this.add = (value-0) + (this.num-0);
this.msg = "正确算出结果: " + this.add;
this.h3Style = "tit";
}else{
this.msg = "确保两个都是数字";
this.h3Style = "title";
this.add = null;
}
}
}
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-11 09:18:36
老师总结：写的很不错 vuejs还是很强大的 没事的时候记得要多练习哦！
