關於vue v-if 與 v-for
不推薦同時使用 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)。
詳解
當 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: {
activeUsers: 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 移動到容器元素，我們不會再對列表中的每個使用者檢查 shouldShowUsers。取而代之的是，我們只檢查它一次，且不會在 shouldShowUsers 為否的時候運算 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>
|
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。請查閱列表渲染指南 以獲取詳細資訊。
當它們處於同一節點，v-for 的優先順序比 v-if 更高，這意味著 v-if 將分別重複運行於每個 v-for 迴圈中。當你想為僅有的一些項渲染節點時，這種優先順序的機制會十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
|
上面的程式碼只傳遞了未完成的 todos。
而如果你的目的是有條件地跳過迴圈的執行，那麼可以將 v-if 置於外層元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
|