v-if和v-for一起使用，v-for的優先級要高于v-if
- 為了過濾一個列表中的項目（比如
v-for = "user in users" v-if = "user.isActive"）。在這種情況下，請將users替換為一個計算屬性（比如activeUsers），讓其返回過濾后的列表。 - 為了避免渲染本應該被隱藏的列表（比如
v-for = "user in users" v-if = "shouldShowUsers"）。這種情況下，請將v-if移動至容器元素上（比如ul，ol）。
詳解
當vue處理指令時，v-for比v-if具有更高的優先級，所以這個模板：
<ul>
<li
v-for = "user in users"
v-if = " user.isActive"
:key = "user.id"
>
{{ user.name }}
</li>
</ul>
將會經過如下運算
this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})
因此，哪怕我們只渲染出一小部分的用戶元素，也得在每次重新渲染的時候遍歷整個列表，不論活躍用戶是否發生了改變。
通過將其更換為如下的一個計算屬性上遍歷：
computed: {
activeUser: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for = "user in activeUsers"
:key = "user.id"
>
{{ user.name }}
</li>
</ul>
我們將會獲得如下好處：
- 過濾后的列表只會在 users 數組發生相關變化時才被重新運算，過濾更高效。
- 使用
v-for = "user in activeUsers"之后，我們在渲染的時候只遍歷活躍用戶，渲染更高效。 - 解藕渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。
也可以把：
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
更新為：
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
通過將v-if移動到容器元素，我們不會再對列表中的每個用戶檢查shouldShoeUsers。取而代之的是，我們只檢查一次，且不會在shouldShoeUsers為否的時候運算v-for。
反例
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
好例子
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
