一. v-if
在字符串模板中,如Handlebars 报破,我們得像這樣寫一個(gè)條件塊
在vue.js使用v-if實(shí)現(xiàn)同樣的功能
# 在中配合v-if條件渲染一整組中配合v-if條件渲染一整組?<template> 中配合 v-if條件渲染一整組
<template v-if="ok">
<p>哈哈哈哈</p>
<h1>我要優(yōu)秀</h1>
</template>
最終渲染結(jié)果不會(huì)包含<template>元素
# 你可以使用v-else指令來(lái)表示v-if的“else 塊”
v-else元素必須緊跟在v-if或者v-else-if元素的后面——否則它將不會(huì)被識(shí)別到腥。
2.1.0 新增
v-else-if哼蛆,顧名思義篇亭,充當(dāng)v-if的“else-if 塊”隘膘∑旆遥可以鏈?zhǔn)降厥褂枚啻危?/p>
如果兩個(gè)元素不需要服用,獨(dú)立的
沒(méi)有添加key值的標(biāo)簽仍然會(huì)被高效服用
如上例的<lable>
二. v-show
根據(jù)條件展示的內(nèi)容,類似于v-if
<p v-show="ok>Hello!!! </p>
v-show的不同處在于該標(biāo)簽會(huì)一直存在于DOM中并被渲染,只是根據(jù)條件判斷是否顯示,
切換display屬性的值
注意: v-show不支持<template>和v-else語(yǔ)法
三.v-ifvsv-show
v-if是“真正的”條件渲染纳击,因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建朱灿。
一般來(lái)說(shuō)昧识,v-if有更高的切換開銷,而v-show有更高的初始渲染開銷盗扒。因此跪楞,如果需要非常頻繁地切換,則使用v-show較好环疼;如果在運(yùn)行時(shí)條件不太可能改變习霹,則使用v-if較好。
四.v-if與v-for一起使用
v-for具有比v-if更高的優(yōu)先級(jí)炫隶。