v-if 与 v-for 联合使用问题

永远不要把 v-if 和 v-for 同时用在同一个元素上。

官方文档明确写出上述建议的目的原因在于，v-if 和 v-for 的组合有 2 种逻辑：

• 先做 if 判断，根据 if 的判断结果来决定是否要进行整个 for 循环；
• 先循环起来，在 for 循环的每一轮中进行 if 判断，来决定本轮循环要执行，或不要执行代码。

由于 v-for 的优先级比 v-if 的优先级高，所以，当你在同一个元素上同时使用 v-for 和 v-if 时，它们的执行逻辑上上述『情况二』。

官方的意思是希望你以明确的不同的写法来表达你是想执行『情况一』，还是想执行『情况二』。

• 对于上述情况一：先 if 后 for，建议拆分成父子（内外）两层。

  v-if 用于父元素，v-for 用于子元素。即，v-if 在外，v-for 在内。例如：

  逻辑上，你想根据 xxx 条件的成立与否来决定是否在页面上显示所有员工信息：v-for="user in users" v-if="shouldShowUsers" 。

  这种情形下，请将 v-if 移动至容器元素上，比如 <ul>、<ol>，将 v-for 留在 <li> 上。

• 对于上述情况二：先 for 后 if，建议使用『计算属性（computed）』。

  将 v-if 的逻辑移入计算属性，在页面上保留 v-for 。例如：

  逻辑上，你想在页面上状态为 xxx 的所有员工信息：v-for="user in users" v-if="user.isActive" 。

  在这种情形下，请将 users 替换为一个计算属性（比如 activeUsers），让其返回过滤后的列表。