帮我写一个vue,使用v-if和v-sele和v-show的bmi体重计算器不用添加性别
时间: 2023-05-12 19:07:17 浏览: 107
用VB开发的一个标准体重测试软件
4星 · 用户满意度95%
好的,以下是一个简单的 Vue BMI 体重计算器代码示例:
```
<template>
<div>
<h2>BMI 体重计算器</h2>
<div>
<label for="height">身高(cm):</label>
<input type="number" id="height" v-model="height">
</div>
<div>
<label for="weight">体重(kg):</label>
<input type="number" id="weight" v-model="weight">
</div>
<div>
<label for="unit">单位:</label>
<select id="unit" v-model="unit">
<option value="metric">公制</option>
<option value="imperial">英制</option>
</select>
</div>
<div v-show="bmi">
<p>您的BMI指数为: {{ bmi }}</p>
<p>您的体重状况为: {{ status }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
height: null,
weight: null,
unit: 'metric',
};
},
computed: {
bmi() {
if (this.height && this.weight) {
let bmi = 0;
if (this.unit === 'metric') {
bmi = this.weight / ((this.height / 100) ** 2);
} else {
bmi = (this.weight / (this.height ** 2)) * 703;
}
return bmi.toFixed(2);
} else {
return null;
}
},
status() {
if (this.bmi) {
if (this.bmi < 18.5) {
return '偏瘦';
} else if (this.bmi < 24.9) {
return '正常';
} else if (this.bmi < 29.9) {
return '超重';
} else {
return '肥胖';
}
} else {
return null;
}
},
},
};
</script>
```
这个 BMI 体重计算器使用了 Vue 的 v-if、v-show 和 v-select 指令,可以根据用户选择的单位(公制或英制)来计算 BMI 值,并显示体重状况。
阅读全文