vue3使用while语句写多个判断

在Vue3中，我们可以使用computed属性来实现多个判断。例如，假设我们需要根据用户输入的分数返回对应的等级，可以使用以下代码：

<template>
  <div>
    <label for="score">请输入分数：</label>
    <input type="number" id="score" v-model="score" />
    <p>您的等级是：{{ level }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
    };
  },
  computed: {
    level() {
      let level = '';
      let score = this.score;
      while (score >= 0) {
        if (score >= 90) {
          level = 'A';
          break;
        } else if (score >= 80) {
          level = 'B';
          break;
        } else if (score >= 70) {
          level = 'C';
          break;
        } else if (score >= 60) {
          level = 'D';
          break;
        } else {
          level = 'E';
          break;
        }
      }
      return level;
    },
  },
};
</script>

在上面的代码中，我们使用了computed属性来计算用户输入的分数所对应的等级。在计算过程中，我们使用了while语句来判断分数所对应的等级。如果分数大于等于90，则等级是A；如果分数大于等于80，则等级是B，以此类推。如果分数小于60，则等级是E。最后，我们将计算出的等级返回给模板中的level变量，并用插值表达式将其显示在页面上。

需要注意的是，在computed属性中，我们只需要定义一个单独的计算函数，Vue会自动将其转换成响应式的getter函数。因此，我们不需要手动监听score变量的变化，Vue会自动帮我们监控score变量的变化并重新计算等级。