官术网_书友最值得收藏!

2.2 條件渲染

2.2.1 v-show

v-show指令可以根據(jù)條件展示元素,代碼如下:

帶有v-show的元素始終會被渲染并保留在DOM中,v-show只是通過簡單地切換元素CSS屬性display:none實(shí)現(xiàn)的。例如,將上面的代碼v-show的值設(shè)置為false,代碼如下:

在瀏覽器中運(yùn)行的效果如圖2.6所示。

圖2.6 v-show在瀏覽器中運(yùn)行的效果

2.2.2 v-if與v-else-if

v-if和v-show都可以實(shí)現(xiàn)條件渲染,但是v-if與v-show不同的是,v-if不是通過切換CSS屬性實(shí)現(xiàn)顯示與隱藏的,當(dāng)v-if的值為false時,帶有v-if的DOM元素就不會被渲染出來。v-if和v-show最大的不同就是,v-if不僅可以單獨(dú)使用,還可以和v-else-if、v-else指令配合使用,類似于JavaScript中的if-else、if-else-if語句。

1.v-if

v-if用于條件性地渲染一部分內(nèi)容。這部分內(nèi)容只會在指令的表達(dá)式返回值為true的時候才被渲染。

index.html文件代碼如下:

在瀏覽器中運(yùn)行的效果如圖2.7所示。

圖2.7 v-if在瀏覽器中運(yùn)行的效果

2.v-else-if

v-else-if指令類似于條件語句中的“else-if塊”,可以與v-if配合使用。

index.html文件代碼如下:

上面代碼在瀏覽器中運(yùn)行的結(jié)果為B,這里需要注意的是,v-else-if指令不能單獨(dú)使用,必須跟在帶有v-if或v-else-if的元素之后。

3.v-if和v-show的區(qū)別

v-if與v-show指令都可以根據(jù)表達(dá)式的值來控制元素的顯示與隱藏狀態(tài)。

v-if相比于v-show,更“真實(shí)”地實(shí)現(xiàn)了元素的渲染與移除,但是在頻繁的切換過程中,使DOM元素不斷地在內(nèi)存中重建與銷毀,這樣便增加了內(nèi)存的開銷。

v-show是更簡單的一種切換顯示與隱藏狀態(tài)的操作,只是修改了CSS屬性中display的值,無論顯示與隱藏,DOM元素始終被渲染。

綜上所述,如果需要在頁面中頻繁地切換某個元素的顯示狀態(tài),推薦使用v-show指令;如果在運(yùn)行時條件很少改變,則推薦使用v-if指令。

2.2.3 v-else

在根據(jù)條件渲染DOM元素時,還可以使用v-else指令來表示“else塊”,類似于JavaScript中的if-else邏輯語句。

index.html文件代碼如下:

在瀏覽器中運(yùn)行的效果如圖2.8所示。

圖2.8 v-else指令在瀏覽器中運(yùn)行的效果

2.2.4 在<template>元素上使用v-if條件渲染分組

因?yàn)関-if是一個指令,所以必須將它添加到一個元素上。但是如果想切換多個元素應(yīng)該如何操作呢?此時可以把一個<template>元素當(dāng)作不可見的包裹元素,并在上面使用v-if。最終的渲染結(jié)果將不包含<template>元素。

index.html文件代碼如下:

在瀏覽器中運(yùn)行的效果如圖2.9所示。

圖2.9 在<template>元素上使用v-if條件運(yùn)行的效果

2.2.5 用key管理可復(fù)用的元素

Vue會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這樣做除了使Vue的執(zhí)行速度變得非常快之外,還有其他一些作用。例如,允許用戶在不同的登錄方式之間切換。

index.html文件代碼如下:

在瀏覽器中運(yùn)行,首先在輸入框中輸入“張三”,如圖2.10所示,然后單擊“切換”按鈕,可以看到郵箱中顯示的是“張三”,如圖2.11所示。

圖2.10 輸入“張三”

圖2.11 切換效果

在上面的示例中,切換狀態(tài)并不會清空用戶已經(jīng)輸入的內(nèi)容,因?yàn)閮蓚€模板使用了相同的元素,<input>不會被替換掉,只是替換了它的placeholder屬性。

這樣也不總是符合實(shí)際需求,所以Vue提供了一種方式來表達(dá)“這兩個元素是完全獨(dú)立的,不要復(fù)用它們”。只需添加一個具有唯一值的key屬性。

index.html文件代碼如下:

在瀏覽器中運(yùn)行,首先在輸入框中輸入“張三”,如圖2.12所示,然后單擊“切換”按鈕,可以看到郵箱中的值為默認(rèn)的placeholder屬性的值,如圖2.13所示。

圖2.12 輸入“張三”

圖2.13 切換效果

主站蜘蛛池模板: 淮北市| 莆田市| 桐城市| 宁蒗| 平潭县| 达孜县| 突泉县| 鹤壁市| 综艺| 富裕县| 手机| 漠河县| 中山市| 绥滨县| 青河县| 陕西省| 长子县| 龙海市| 黑龙江省| 建阳市| 南京市| 乌什县| 桦甸市| 邳州市| 新和县| 平谷区| 余江县| 壤塘县| 辛集市| 皋兰县| 尉犁县| 个旧市| 故城县| 阳谷县| 肥东县| 宽城| 柳州市| 鹤岗市| 忻城县| 广宗县| 城口县|