请老师检查一下下，谢谢。
来源：3-23 自由编程
幻城163630
2020-07-23 21:47:57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表单绑定</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="value1">
<select v-model="value2">
<option >+</option>
<option >-</option>
<option >*</option>
<option >/</option>
</select>
<input type="text" v-model.number="value3">
<button v-on:click="handleClick">=</button>
<input type="text" v-model="value4" disabled>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
value1:"",
value2:"",
value3:"",
value4:"",
},
methods:{
handleClick:function(){
switch(this.value2){
case("+"): this.value4=this.value1+this.value3;
break;
case("-"): this.value4=this.value1-this.value3;
break;
case("*"): this.value4=this.value1*this.value3;
break;
case("/"): this.value4=this.value1/this.value3;
break;
}
this.value1="";
this.value2="";
this.value3="";
}
},
});
</script>
</body>
</html>
1回答
-
同学你好，效果不符合要求，如下图所示：
当输入6和2，然后选择加号，最后点击等号，结果出来的同时，前面的加数没有了。
且效果图中，当切换加减乘除时，对应的结果也要发生变化。建议同学再细心看一下效果图的演示哦。根据最后一个步骤要求，在watch中监听运算符的值发生改变时，重新进行计算。
综上所述，代码如下修改：
设置默认值
注释的去掉，前面输入的数字不能清空
监听运算符
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题