vue中v if和v for混用時應該注意的事項

2021-10-05 19:29:22 字數 1176 閱讀 9696

v-if和v-for一般不建議一起使用，如果一定需要用到，最好使用一下兩種方法進行替換。

1、當根據遍歷的列表中的物件的某乙個屬性決定展示與否的時候，使用計算屬性(computed)進行判斷，computed的具體介紹詳見：

例子：遍歷users，如果物件的isshow屬性為true時候展示

users:[,


,,]
改良前：因為v-for優先順序比v-if高，所以在每次重新渲染的時候會先遍歷整個列表，再進行if判斷是否展示，即：每次都需要重新渲染全部列表物件再判斷是否需要展示



for=


"user in users" v-if=


"user.isshow"


>


}<


/li>


<


/ul>
改良後：會先判定列表物件時候需要顯示，之後渲染需要顯示的物件，效率更高

// 渲染**


for=


"user in showusers"


:key=


"user.id"


>


}<


/li>


<


/ul>
// 計算屬性**


computed:)}


}
2、根據某乙個與待迴圈列表無關的屬性決定是否展示渲染後的陣列物件時，可以把v-if上移。

例子：根據isshow屬性決定是否顯示users列表

users:[,


,,],


isshow:


true
改良前：



for=


"user in users" v-if=


"isshow"


>


}<


/li>


<


/ul>
改良後：

"isshow"


>


for=


"user in users"


>


}<


/li>


<


/ul>

vue中v for和v if誰先被解析

最近看到乙個比較有意思的問題就是 vue中v for和v if同時在乙個標籤中，瀏覽器解析的時候會先解析v for呢還是v if。為了探明究竟，做了乙個小測試，如下 doctype html en utf 8 x ua compatible content ie edge viewport cont...

vue中v for和v if不能一起使用

vue中v for和v if不能一起使用 在同一標籤上，v for和v if不能一起使用，因為v for的優先順序大於v if 這時候可以使用computed將資料過濾掉 for item in arr key item.id v if item.isshow h3 div 將isshow為fals...

為什麼Vue中的v if和v for不建議一起用？

v if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染 v for 指令基於乙個陣列來渲染乙個列表。v for 指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列或者物件，而 item 則是被迭代的陣列元素的別名 在 v...