创建一个Vue 3应用,包含三个输入框,分别用于输入数字a,运算符,b。计算并显示这两个数字的运算的结果。
时间: 2024-10-08 14:24:29 浏览: 33
vue.js实现只能输入数字的输入框
创建一个简单的Vue 3应用,你需要以下几个步骤:
首先,在HTML部分设置模板,包括三个输入框、一个按钮以及用来显示结果的区域:
```html
<template>
<div id="app">
<input type="number" v-model="numA" placeholder="输入数字a">
<select v-model="operator">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="number" v-model="numB" placeholder="输入数字b">
<button @click="calculateResult">计算</button>
<p>{{ result }}</p>
</div>
</template>
```
然后,在JavaScript部分编写计算方法和数据绑定:
```javascript
<script>
import { ref } from 'vue';
export default {
name: "Calculator",
data() {
return {
numA: '',
operator: '',
numB: '',
result: '',
};
},
methods: {
calculateResult() {
const a = Number(this.numA);
const b = Number(this.numB);
switch (this.operator) {
case '+':
this.result = a + b;
break;
case '-':
this.result = a - b;
break;
case '*':
this.result = a * b;
break;
case '/':
if (b !== 0) {
this.result = a / b;
} else {
this.result = "除数不能为零";
}
break;
default:
this.result = "无效的运算符";
}
},
},
};
</script>
```
现在你有了一个基本的计算器应用,当你在输入框中填写数字,选择运算符,然后点击“计算”,就会显示运算结果。
阅读全文