老师请检查
来源：3-23 自由编程
前端小白白白白白白
2021-03-23 20:34:19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1" />
<select v-model="operation">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="num2" />
<button @click="caculate">=</button>
<input type="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num1: '',
num2: '',
operation: '',
result: ''
},
methods: {
caculate: function() {
switch (this.operation) {
case '+':
this.result = this.num1 + this.num2
break
case '*':
this.result = this.num1 * this.num2
break
case '-':
this.result = this.num1 - this.num2
break
case '/':
this.result = this.num1 / this.num2
break
}
}
},
watch:{
operation:function(){
this.caculate()
}
}
})
</script>
</body>
</html>
1回答
-
同学你好，效果实现是对的，建议优化：可以给operation设置默认值为+。
页面一开始显示加法，这样如果没有选择运算符，点击等号时，默认进行加法运算，效果会更好，如下图所示：
祝学习愉快~
0
相似问题