面试题：Vue中如何在模板语法里较为优雅地处理简单条件逻辑与复杂条件逻辑的区别

Question

在Vue模板语法中，我们常用v - if、v - else - if、v - else来处理条件逻辑。请阐述在处理简单条件逻辑（例如判断一个布尔值来显示或隐藏元素）和复杂条件逻辑（例如根据多个变量的不同组合来展示不同内容）时，使用这些指令的方式有何不同，并且分别举例说明。

Answer 1

简单条件逻辑

在处理简单条件逻辑（如判断一个布尔值来显示或隐藏元素）时，使用 v-if 指令非常直接。

• 使用方式：直接将 v-if 绑定到一个布尔值或返回布尔值的表达式上。
• 示例：

<template>
  <div>
    <p v-if="isShow">这是要显示的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  }
};
</script>

在此例中，当 isShow 为 true 时，<p> 标签内的内容会显示；为 false 时则隐藏。

复杂条件逻辑

在处理复杂条件逻辑（如根据多个变量的不同组合来展示不同内容）时，v-if、v-else-if、v-else 组合使用能满足需求。

• 使用方式：根据不同变量组合构建多个条件分支。
• 示例：

<template>
  <div>
    <p v-if="score >= 90 && subject === 'Math'">数学成绩优秀</p>
    <p v-else-if="score >= 60 && subject === 'Math'">数学成绩及格</p>
    <p v-else-if="score < 60 && subject === 'Math'">数学成绩不及格</p>
    <p v-else-if="score >= 90 && subject === 'English'">英语成绩优秀</p>
    <p v-else-if="score >= 60 && subject === 'English'">英语成绩及格</p>
    <p v-else-if="score < 60 && subject === 'English'">英语成绩不及格</p>
    <p v-else>没有匹配的科目和成绩情况</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85,
      subject: 'English'
    };
  }
};
</script>

此例根据 score（成绩）和 subject（科目）两个变量的不同组合，展示不同的内容。若没有匹配到任何 v-if 或 v-else-if 的条件，则显示 v-else 的内容。