vue动态表单身高体重监听自动填入BMI
时间: 2023-06-29 16:19:23 浏览: 98
好的,针对您的问题,可以通过监听身高和体重的变化来自动计算BMI,并将计算结果填入表单中。以下是示例代码:
```
<template>
<div>
<form>
<label>身高(cm)</label>
<input type="number" v-model="height" @input="calculateBMI"/>
<br/>
<label>体重(kg)</label>
<input type="number" v-model="weight" @input="calculateBMI"/>
<br/>
<label>BMI</label>
<input type="number" v-model="bmi" disabled/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
height: null,
weight: null,
bmi: null
}
},
methods: {
calculateBMI() {
if (this.height && this.weight) {
const heightM = this.height / 100
const bmi = this.weight / (heightM * heightM)
this.bmi = bmi.toFixed(2)
} else {
this.bmi = null
}
}
}
}
</script>
```
在上面的示例代码中,我们用 `v-model` 指令将身高、体重和BMI绑定到了组件的 `data` 属性中。然后,我们使用 `@input` 监听输入框的变化,并在变化时调用 `calculateBMI` 方法计算BMI。在 `calculateBMI` 方法中,我们检查身高和体重是否都已填入,如果是,就用计算公式计算BMI,并将结果填入 `bmi` 属性中。最后,我们用 `disabled` 属性禁用了BMI输入框,以防止用户手动输入。