使用vue写两个组件, 第一个组件:用户输入两个数,计算两个数的和并显示 并包含第二个组件:用户输入两个数,计算数A/数B的结果并显示。
时间: 2024-01-21 11:18:52 浏览: 26
好的,下面是代码示例:
第一个组件 - AddNum.vue
```html
<template>
<div>
<h3>计算两个数的和</h3>
<div>
<label for="num1">数1:</label>
<input type="text" v-model="num1" id="num1">
</div>
<div>
<label for="num2">数2:</label>
<input type="text" v-model="num2" id="num2">
</div>
<div>
<button @click="addNum">计算和</button>
</div>
<div v-if="result">
结果:{{ result }}
</div>
<hr>
<div>
<h4>计算数A/数B的结果</h4>
<div>
<label for="numA">数A:</label>
<input type="text" v-model="numA" id="numA">
</div>
<div>
<label for="numB">数B:</label>
<input type="text" v-model="numB" id="numB">
</div>
<div>
<calculate-divide :num-a="numA" :num-b="numB"></calculate-divide>
</div>
</div>
</div>
</template>
<script>
import CalculateDivide from './CalculateDivide.vue'
export default {
name: 'AddNum',
components: {
CalculateDivide
},
data () {
return {
num1: '',
num2: '',
result: null,
numA: '',
numB: ''
}
},
methods: {
addNum () {
const sum = Number(this.num1) + Number(this.num2)
this.result = sum
}
}
}
</script>
```
第二个组件 - CalculateDivide.vue
```html
<template>
<div>
<button @click="divide">计算除法</button>
<div v-if="result">
结果:{{ result }}
</div>
</div>
</template>
<script>
export default {
name: 'CalculateDivide',
props: {
numA: {
type: String,
required: true
},
numB: {
type: String,
required: true
}
},
data () {
return {
result: null
}
},
methods: {
divide () {
if (this.numB === '0') {
this.result = '除数不能为0'
return
}
const result = Number(this.numA) / Number(this.numB)
this.result = result
}
}
}
</script>
```
使用方法:
```html
<template>
<div>
<AddNum></AddNum>
</div>
</template>
<script>
import AddNum from './AddNum.vue'
export default {
name: 'App',
components: {
AddNum
}
}
</script>
```
在页面中使用`<AddNum></AddNum>`即可展示第一个组件,其中包含了第二个组件。