v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染
v-for 指令基於乙個陣列來渲染乙個列表。 v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列或者物件，而 item 則是被迭代的陣列元素的別名
在 v-for 的時候，建議設定 key 值，並且保證每個 key 值是獨一無二的，這便與 diff 演算法進行優化
兩者在用法上
v-if
="isshow"
/>
v-for
="item in items"
:key
="item.id"
>
}li>
在 vue 模板編譯的時候，會將指令系統轉化成可執行的 render 函式
示例
編寫乙個 p 標籤，同時使用 v-if 和 v-for
>
v-if
="isshow"
v-for
="item in items"
>
}p>
div>
newvue(,
]}},
computed:}}
)
f anonymous()
},_l(
(items)
,function
(item)),
0)}}
初步得到結論： v-for 優先順序是比 v-if 高
再將 v-for 與 v-if 置於不同標籤
>
v-if
="isshow"
>
v-for
="item in items"
>
}p>
template
>
div>
f anonymous()
},[(isshow)?[
_v("\n"),
_l((items)
,function
(item))]
:_e()
],2)
}}
我們再檢視下 vue 原始碼
原始碼位置：\vue-dev\src\compiler\codegen\index.js
export
function
genelement
(el:astelement,state:codegenstate)
:string
if(el.staticroot &&
!el.staticprocessed)
else
if(el.once &&
!el.onceprocessed)
else
if(el.
for&&
!el.forprocessed)
else
if(el.
if&&
!el.ifprocessed)
else
if(el.tab ===
'template'
&&!el.slottarget &&
!state.pre)
else
if(el.tag ===
'slot'
)else
}
最終結論：v-for 優先順序比 v-if 高
永遠不要把 v-if 和 v-for 同時用在乙個元素上，帶來效能方面的浪費（每次渲染都會先迴圈再進行條件判斷）
如果避免出現這種情況，則在外層巢狀 template （頁面渲染不生成dom節點），再這一層進行 v-if 判斷，然後再內部進行 v-for 迴圈
v-if
="isshow"
>
v-for
="item in items"
>
template
>
computed:)}
}
為什麼Vue中的v if和v
v if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回true值的時候被渲染 v for指令基於乙個陣列來渲染乙個列表。v for指令需要使用item in items形式的特殊語法，其中items是源資料陣列或者物件，而item則是被迭代的陣列元素的別名 在v for的時候，建議設定...
vue中v if和v show的區別
v if 是根據條件來判斷是否要渲染該元素。而 v show是已經渲染了該元素用css來決定他顯不顯示。看起來似乎是v if比較好一點。但是作為元素間的切換的話。v if有較高的切換開銷。所以當如果你的頁面元素要經常切換的話用v show會比較好。當不需要經常切換的時候，這種情況就用v if比較好。...
vue中v if和v show的區別
相同點 v if與v show都可以動態控制dom元素顯示隱藏 不同點 v if顯示隱藏是將dom元素整個新增或刪除，而v show隱藏則是為該元素新增css display none，dom元素還在。需要注意的是，當乙個元素預設在css中加了display none屬性，這時通過if show修改...