请老师检查
来源：3-23 自由编程
宝慕林4466778
2020-08-04 20:33:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='./vue.js'></script>
</head>
<body>
<div class="wrap" id='wrap'>
<input type="text" v-model.number='firstvalue'>
<select v-model='operator'>
<option disabled="disabled" value='1'>----请选择----</option>
<option>+</option>
<option>-</option>
<option>x</option>
<option>/</option>
</select>
<input type="text" v-model.number='lastvalue'>
<button type="" @click='clickhandler'>=</button>
<input type="text" readonly='readonly' v-model='finnal'>
</div>
<script>
let vm = new Vue({
el:'#wrap',
data:{
firstvalue:'',
lastvalue:'',
finnal:'',
operator:'1'
},
//watch value change
watch:{
firstvalue:function () {
console.log(this.firstvalue)
console.log(typeof this.firstvalue)
},
operator:function () {
console.log(this.operator)
},
lastvalue:function () {
console.log(this.lastvalue)
}
},
methods:{
//click
clickhandler:function () {
if(typeof this.firstvalue==='number'&&typeof this.lastvalue ==='number'){
switch (this.operator) {
case '+':
this.finnal=this.add(this.firstvalue,this.lastvalue)
break;
case '-':
this.finnal=this.minus(this.firstvalue,this.lastvalue)
break;
case 'x':
this.finnal=this.multi(this.firstvalue,this.lastvalue)
break;
case '/':
this.finnal=this.div(this.firstvalue,this.lastvalue)
break;
}
//reset
this.firstvalue=''
this.lastvalue=''
this.operator='1'
}else{
alert('plz input number')
}
},
//opeartion
add:function (a,b) {
return a+b
},
minus:function (a,b) {
return a-b
},
multi:function (a,b) {
return a*b
},
div:function (a,b) {
return a/b
},
}
})
</script>
</body>
</html>
2回答
-
好帮手慕粉
2020-08-05
同学你好，代码实现的是正确的。继续加油，祝学习愉快~
0 -
宝慕林4466778
提问者
2020-08-04
弄错意思了 老师看这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='./vue.js'></script>
</head>
<body>
<div class="wrap" id='wrap'>
<input type="text" v-model.number='firstvalue'>
<select v-model='operator'>
<option disabled="disabled" value='1'>----请选择----</option>
<option>+</option>
<option>-</option>
<option>x</option>
<option>/</option>
</select>
<input type="text" v-model.number='lastvalue'>
<button type="" @click='clickhandler'>=</button>
<input type="text" readonly='readonly' v-model='finnal'>
</div>
<script>
let vm = new Vue({
el:'#wrap',
data:{
firstvalue:'',
lastvalue:'',
finnal:'',
operator:'1'
},
//watch value change
watch:{
firstvalue:function () {
console.log(this.firstvalue)
console.log(typeof this.firstvalue)
},
operator:function () {
this.operation()
},
lastvalue:function () {
console.log(this.lastvalue)
}
},
methods:{
//click
clickhandler:function () {
this.operation()
},
//opeartion
operation:function () {
if(typeof this.firstvalue==='number'&&typeof this.lastvalue ==='number'){
switch (this.operator) {
case '+':
this.finnal=this.add(this.firstvalue,this.lastvalue)
break;
case '-':
this.finnal=this.minus(this.firstvalue,this.lastvalue)
break;
case 'x':
this.finnal=this.multi(this.firstvalue,this.lastvalue)
break;
case '/':
this.finnal=this.div(this.firstvalue,this.lastvalue)
break;
}
}else{
alert('plz input number')
}
},
add:function (a,b) {
return a+b
},
minus:function (a,b) {
return a-b
},
multi:function (a,b) {
return a*b
},
div:function (a,b) {
return a/b
},
}
})
</script>
</body>
</html>
0
相似问题