vue json生成的身高体重输入框自动计算BMI

好的，针对你的问题，我可以为你提供以下思路：

1. 首先，需要在Vue中定义一个data对象，包含身高、体重和BMI三个属性。

2. 然后，需要在模板中创建两个输入框，分别用于输入身高和体重，并且需要绑定data对象中的对应属性。

3. 接着，需要使用计算属性来实时计算BMI值。计算属性可以基于data对象中的身高和体重属性进行计算，并返回计算结果。

4. 最后，需要在模板中显示BMI的计算结果，可以使用一个固定的区域来显示。

以下是一个简单的代码示例：

<template>
  <div>
    <label for="height-input">身高：</label>
    <input type="number" id="height-input" v-model="height" />cm

    <label for="weight-input">体重：</label>
    <input type="number" id="weight-input" v-model="weight" />kg

    <div>BMI: {{ bmi }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: null,
      weight: null,
      bmi: null,
    };
  },
  computed: {
    bmi() {
      if (this.height && this.weight) {
        const heightInM = this.height / 100;
        return (this.weight / (heightInM * heightInM)).toFixed(2);
      } else {
        return null;
      }
    },
  },
};
</script>

这段代码中，我们使用了一个计算属性`bmi`，它基于`height`和`weight`属性进行计算，并返回保留两位小数的结果。在模板中，我们使用了`v-model`指令来双向绑定输入框的值，同时使用插值表达式来显示计算结果。