最近看到乙個比較有意思的問題就是:vue中v-for和v-if同時在乙個標籤中,瀏覽器解析的時候會先解析v-for呢還是v-if。為了探明究竟,做了乙個小測試,**如下:
可以看出解析渲染過程是先進入迴圈遍歷陣列,然後進行條件判斷。<
!doctype html>
"en"
>
"utf-8"
>
"x-ua-compatible" content=
"ie=edge"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
for=
"item in cha" v-if=
"isok"
>
}<
/p>
<
/div>
"vue.js"
>
<
/script>
newvue(,
,]}}
, computed:},
})console.
log;
<
/script>
<
/body>
<
/html>
vue中v if和v for混用時應該注意的事項
v if和v for一般不建議一起使用,如果一定需要用到,最好使用一下兩種方法進行替換。1 當根據遍歷的列表中的物件的某乙個屬性決定展示與否的時候,使用計算屬性 computed 進行判斷,computed的具體介紹詳見 例子 遍歷users,如果物件的isshow屬性為true時候展示 users...
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...