<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h5>表达式</h5>
<div id="app">
语文:<input v-model.number="a" /><br />
数学:<input v-model.number="b" /><br />
英语:<input v-model.number="c" /><br />
平均:<input :value="(a+b+c)/3"/><br />
总分:<input :value="a+b+c" /><br />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
a: 0,b: 0,c: 0
}
})
</script>
<hr />
<h5>方法</h5>
<div id="app2">
语文:<input v-model.number="A" @blur="gettotal" />;<br />
数学:<input v-model.number="B" @blur="gettotal" />;<br />
英语:<input v-model.number="C" @blur="gettotal" />;<br />
平均:<input v-model="PJ" />;<br />
总分:<input v-model="SUM"/>;<br />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app2",
data: {
A:0,B:0,C:0,PJ:0,SUM:0
},
methods: {
gettotal: function() {
this.PJ =(this.A + this.B+this.C)/3;
this.SUM =this.A + this.B;
}
}
})
</script>
<hr />
<h5>侦听</h5>
<div id="app3">
语文<input v-model.number="l" /><br />
数学<input v-model.number="m" /><br />
英语<input v-model.number="n" /><br />
平均<input v-model.number="mm" /><br />
总分<input v-model.number="nn" /><br />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app3",
data: {
l:0,m:0,n:0,mm:0,nn:0
}
});
vm.$watch("l", function(newl, oldl) {
this.mm = (this.m +this.n+ newl)/3;
this.nn = this.m +this.n+ newl;
});
vm.$watch("m", function(newm, oldm) {
this.mm = (this.l +this.n+ newm)/3;
this.nn = this.l +this.n+ newm;
});
vm.$watch("n", function(newn, oldm) {
this.mm = (this.l +this.m+ newn)/3;
this.nn = this.l +this.m+ newn;
});
</script>
<hr />
<h5>侦听2</h5>
<div id="app31">
语文<input v-model.number="l2" /><br />
数学<input v-model.number="m2" /><br />
英语<input v-model.number="n2" /><br />
平均<input v-model.number="mm2" /><br />
总分<input v-model.number="nn2" /><br />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app31",
data: {
l2:0,m2:0,n2:0,mm2:0,nn2:0
},
watch:{
l2:function(g){
this.mm2 = (this.m2 +this.n2+g)/3;
this.nn2 = this.m2 +this.n2+g;
},
m2:function(g){
this.mm2 = (this.l2 +this.n2+g)/3;
this.nn2 = this.l2 +this.n2+g;
},
n2:function(g){
this.mm2 = (this.l2 +this.m2+g)/3;
this.nn2 = this.l2 +this.m2+g;
}
}
});
</script>
<hr />
<h5>计算方法</h5>
<div id="app4">
语文<input v-model.number="o" /><br />
数学<input v-model.number="p" /><br />
英语<input v-model.number="q" /><br />
平均<input v-model.number="r" /><br />
总分<input v-model.number="s" /><br />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app4",
data: {
o: 0,
p: 0,
q: 0
},
computed:{
r:function(){
return (this.o+this.p+this.q)/3
},
s:function(){
return this.o+this.p+this.q
}
}
});
</script>
</body>
</html>
1859
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
