在 vue 的幸福国度，当 v-if 遇见 v-for

在vue这个幸福国度中，可惜的是v-if 遇到 v-for 注定不会有好的结果。更狠的是，我们永远不要让它们在一个地方遇见（不要把 v-if 和 v-for 同时用在同一个元素上）

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>