学艺不精产生大坑-----vue 的v-else 和v-if控制多个组件的显隐，但是同时显示了

项目场景：

项目场景：在一个文件里通过v-else 和v-if控制多个组件的显隐

问题描述

明明满足了v-if的条件还是会自动执行v-else的，让两个组件同时显示了

<div v-if="busId === '1'">
        <taskApproval></taskApproval>
      </div>
      <div v-if="busId === '2'">
        <taskApproval></taskApproval>
      </div>
      <div v-else>
        <parts-approvel ></parts-approvel>
      </div>

原因分析：

v-else仅仅在靠近它的最近的v-if满足条件才会停止，所以在第一个满足条件就会直接执行v-else
v-else和v-else-if是v-if的补充指令，它们可以在v-if之后使用，用于处理多个条件的情况。

v-else和v-else-if的实现原理如下：

v-else会在前面的v-if或v-else-if条件为假时才会生效。
v-else-if会在前面的v-if条件为假，且自身条件为真时生效。

解决方案：

把v-if只保留一个，其他的换成v-else-if