用vue写一个计算bmi的代码

下面是一个简单的使用 Vue.js 编写的计算 BMI 的代码示例：

<template>
  <div>
    <h2>计算BMI</h2>
    <form>
      <label for="weight">体重（kg）：</label>
      <input type="number" id="weight" v-model="weight" required>
      <br>
      <label for="height">身高（m）：</label>
      <input type="number" id="height" v-model="height" required>
      <br>
      <button type="button" @click="calculateBMI">计算BMI</button>
    </form>
    <div v-if="bmi">
      <p>BMI值为：{{ bmi }}</p>
      <p>评估结果为：{{ bmiResult }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weight: null,
      height: null,
      bmi: null,
      bmiResult: null
    };
  },
  methods: {
    calculateBMI() {
      this.bmi = (this.weight / (this.height * this.height)).toFixed(2);
      if (this.bmi < 18.5) {
        this.bmiResult = "过轻";
      } else if (this.bmi >= 18.5 && this.bmi < 24) {
        this.bmiResult = "正常";
      } else if (this.bmi >= 24 && this.bmi < 28) {
        this.bmiResult = "过重";
      } else {
        this.bmiResult = "肥胖";
      }
    }
  }
};
</script>

在这个示例中，我们使用了一个表单来输入体重和身高，并使用 `v-model` 指令将数据绑定到组件的 `data` 对象中。还有一个 `calculateBMI` 方法，当用户点击“计算BMI”按钮时，该方法会计算BMI并将计算结果绑定到 `bmi` 和 `bmiResult` 中，最后在页面上显示出来。