写一个vue,用v-if和v-sele的bmi体重计算器
时间: 2023-05-12 17:07:13 浏览: 125
好的,以下是一个使用 Vue、v-if 和 v-select 的 BMI 体重计算器的代码示例:
```
<template>
<div>
<h2>BMI 体重计算器</h2>
<div>
<label for="height">身高(厘米):</label>
<input id="height" type="number" v-model="height" />
</div>
<div>
<label for="weight">体重(千克):</label>
<input id="weight" type="number" v-model="weight" />
</div>
<div>
<label for="gender">性别:</label>
<select id="gender" v-model="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div v-if="height && weight">
<p>您的 BMI 值为 {{ bmi }}。</p>
<p v-if="bmi < 18.5">您的体重过轻。</p>
<p v-if="bmi >= 18.5 && bmi < 24">您的体重正常。</p>
<p v-if="bmi >= 24 && bmi < 28">您的体重过重。</p>
<p v-if="bmi >= 28 && bmi < 30">您的体重属于轻度肥胖。</p>
<p v-if="bmi >= 30 && bmi < 35">您的体重属于中度肥胖。</p>
<p v-if="bmi >= 35">您的体重属于重度肥胖。</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
height: null,
weight: null,
gender: 'male',
};
},
computed: {
bmi() {
if (!this.height || !this.weight) {
return null;
}
const heightInMeters = this.height / 100;
return (this.weight / (heightInMeters * heightInMeters)).toFixed(1);
},
},
};
</script>
```
希望这个代码示例能够帮助你!