利用vue3中的列表写一个要求为:1.用户输入A,B两个数 2.有两个选项,分别为加法add,减法division 3.选择add,则显示AB两个数相加的结果 4.选择division,则显示AB两个数相减的结果
时间: 2024-02-19 14:03:42 浏览: 58
好的,根据您的要求,我为您提供以下代码实现:
```
<template>
<div>
<input v-model.number="numberA" type="number" placeholder="请输入A的值" />
<input v-model.number="numberB" type="number" placeholder="请输入B的值" />
<select v-model="operation">
<option value="add">加法</option>
<option value="division">减法</option>
</select>
<button @click="calculate">计算</button>
<div v-if="result !== null">结果为:{{ result }}</div>
</div>
</template>
<script>
export default {
data() {
return {
numberA: null,
numberB: null,
operation: "add",
result: null,
};
},
methods: {
calculate() {
if (this.operation === "add") {
this.result = this.numberA + this.numberB;
} else if (this.operation === "division") {
this.result = this.numberA - this.numberB;
}
},
},
};
</script>
```
以上代码中,我们使用了`v-model`指令绑定了用户输入的`numberA`和`numberB`,使用了`v-model`指令绑定了用户选择的操作`operation`,当用户点击计算按钮时,根据`operation`的值,计算出结果并将其赋值给`result`,最后在页面上展示出来。
阅读全文