写两个组件, 第一个组件:用户输入两个数,计算两个数的和并显示 第二个组件:用户输入两个数,计算数A/数B的结果并显示。
时间: 2023-12-17 16:06:05 浏览: 29
第一个组件代码如下:
```html
<template>
<div>
<label for="num1">第一个数:</label>
<input type="number" id="num1" v-model="num1">
<br>
<label for="num2">第二个数:</label>
<input type="number" id="num2" v-model="num2">
<br>
<button @click="sum">计算</button>
<br>
<p>结果为:{{result}}</p>
</div>
</template>
<script>
export default {
data() {
return {
num1: '',
num2: '',
result: ''
}
},
methods: {
sum() {
this.result = Number(this.num1) + Number(this.num2)
}
}
}
</script>
```
第二个组件代码如下:
```html
<template>
<div>
<label for="numa">被除数:</label>
<input type="number" id="numa" v-model="numa">
<br>
<label for="numb">除数:</label>
<input type="number" id="numb" v-model="numb">
<br>
<button @click="divide">计算</button>
<br>
<p>结果为:{{result}}</p>
</div>
</template>
<script>
export default {
data() {
return {
numa: '',
numb: '',
result: ''
}
},
methods: {
divide() {
if (this.numb === '0') {
this.result = '除数不能为0'
} else {
this.result = Number(this.numa) / Number(this.numb)
}
}
}
}
</script>
```
以上代码可以在 Vue.js 的单文件组件中使用,分别实现了计算两个数的和和计算两个数的商。