vue 填入身高体重 自动监听计算BMI并赋值完成

好的，你可以参考以下代码示例：

<template>
  <div>
    <label>身高（cm）：</label>
    <input type="number" v-model="height" @input="calculateBMI">
    <br>
    <label>体重（kg）：</label>
    <input type="number" v-model="weight" @input="calculateBMI">
    <br>
    <span v-if="bmi !== null">您的BMI指数为：{{ bmi }}</span>
  </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)).toFixed(2);
        this.bmi = bmi;
      } else {
        this.bmi = null;
      }
    }
  }
};
</script>

在上述代码中，我们通过 `@input` 监听输入框的变化，当输入框中的值发生变化时，自动触发 `calculateBMI` 方法进行 BMI 计算，并将计算结果赋值给 `bmi` 变量。需要注意的是，当身高或体重输入框中的值为空时，将 `bmi` 变量赋值为 `null`。这样，在页面上，只有当 `bmi` 不为空时，才会显示计算结果。