计算结果无法显示
来源：2-11 自由编程
qq_慕盖茨6087126
2022-03-29 10:10:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue.js"></script>
<style>
div{
width: 700px;
height: 300px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="num1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button v-on:click="call">=</button>
<span>{{result}}</span>
</div>
<script>
const app = {
data(){
return{
num1:'',
num2:'',
opt:'',
result:''
}
},
methods:{
cal () {
switch (this.opt) {
case '+':
this.result = parseFloat(this.num1) + parseFloat(this.num2);
break;
case '-':
this.result = parseFloat(this.num1) - parseFloat(this.num2);
break;
case '*':
this.result = parseFloat(this.num1) * parseFloat(this.num2);
break;
case '/':
this.result = parseFloat(this.num1) / parseFloat(this.num2);
break;
}
},
}
};
Vue.createApp(app).mount("#app")
</script>
</body>
</html>写回答
1回答
-
好帮手慕小尤
2022-03-29
同学你好，未成功调用cal()方法，建议同学将call修改为cal。如下所示：然后重新测试试一下。
祝学习愉快！
0
相似问题