帮我用vue3写一个男女比例的组件 只用传入男生比例就可以显示男女比例
时间: 2024-03-01 14:50:43 浏览: 14
好的,以下是一个简单的男女比例组件的 Vue 3 实现:
```
<template>
<div class="gender-ratio">
<div class="male-bar" :style="{ width: maleRatio + '%' }"></div>
<div class="female-bar" :style="{ width: femaleRatio + '%' }"></div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
props: {
maleRatio: {
type: Number,
required: true
}
},
computed: {
femaleRatio() {
return 100 - this.maleRatio
}
}
})
</script>
<style scoped>
.gender-ratio {
display: flex;
height: 20px;
background-color: #eee;
}
.male-bar {
height: 100%;
background-color: #007bff;
}
.female-bar {
height: 100%;
background-color: #ff69b4;
}
</style>
```
在这个组件中,我们使用了 `defineComponent` 来定义一个 Vue 组件,并接受一个 `maleRatio` 属性作为男性比例的输入。组件内部计算了女性比例,并使用 `style` 绑定将男女比例以不同颜色的进度条的形式展现出来。
使用该组件只需在父组件中传入男性比例即可,如:
```
<template>
<div>
<gender-ratio :male-ratio="70" />
</div>
</template>
<script>
import GenderRatio from './GenderRatio.vue'
export default {
components: {
GenderRatio
}
}
</script>
```
这将会显示一个男性比例为 70% 的男女比例组件。