使用vue用户输入两个数,分别为A,B,下拉框里面有四个选项:加法,减法,乘法,除法要求:选择N个选项,输出对应的结果
时间: 2023-12-05 19:03:38 浏览: 126
利用文本框输入两个操作数和一个运算符,进行相应的加法或减法运算并显示结果
4星 · 用户满意度95%
好的,您可以参考以下代码实现:
```html
<template>
<div>
<input type="number" v-model="numA" placeholder="请输入数字A"/>
<input type="number" v-model="numB" placeholder="请输入数字B"/>
<select v-model="operator">
<option value="addition">加法</option>
<option value="subtraction">减法</option>
<option value="multiplication">乘法</option>
<option value="division">除法</option>
</select>
<button @click="calculate">计算</button>
<p>结果为: {{result}}</p>
</div>
</template>
<script>
export default {
data() {
return {
numA: '',
numB: '',
operator: 'addition',
result: ''
};
},
methods: {
calculate() {
switch (this.operator) {
case 'addition':
this.result = Number(this.numA) + Number(this.numB);
break;
case 'subtraction':
this.result = Number(this.numA) - Number(this.numB);
break;
case 'multiplication':
this.result = Number(this.numA) * Number(this.numB);
break;
case 'division':
this.result = Number(this.numA) / Number(this.numB);
break;
default:
break;
}
}
}
};
</script>
```
在上述代码中,我们通过v-model指令将输入框中用户输入的数值与data中的numA和numB进行绑定,通过v-model指令将下拉框中用户选择的运算符与data中的operator进行绑定。接着,在点击“计算”按钮时,我们根据用户选择的运算符进行相应的运算,并将结果存放在data中的result中,最后在页面上展示出来。
阅读全文