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

2.2 條件渲染

2.2.1 v-show

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

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

在瀏覽器中運行的效果如圖2.6所示。

圖2.6 v-show在瀏覽器中運行的效果

2.2.2 v-if與v-else-if

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

1.v-if

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

index.html文件代碼如下:

在瀏覽器中運行的效果如圖2.7所示。

圖2.7 v-if在瀏覽器中運行的效果

2.v-else-if

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

index.html文件代碼如下:

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

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

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

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

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

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

2.2.3 v-else

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

index.html文件代碼如下:

在瀏覽器中運行的效果如圖2.8所示。

圖2.8 v-else指令在瀏覽器中運行的效果

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

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

index.html文件代碼如下:

在瀏覽器中運行的效果如圖2.9所示。

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

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

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

index.html文件代碼如下:

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

圖2.10 輸入“張三”

圖2.11 切換效果

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

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

index.html文件代碼如下:

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

圖2.12 輸入“張三”

圖2.13 切換效果

主站蜘蛛池模板: 怀来县| 渝北区| 济阳县| 鹤壁市| 永宁县| 乌鲁木齐县| 吐鲁番市| 东丽区| 浏阳市| 峡江县| 响水县| 屏南县| 团风县| 休宁县| 自治县| 南昌县| 宜都市| 遵义县| 卓资县| 定西市| 东丰县| 汕头市| 深州市| 毕节市| 南雄市| 西和县| 涿鹿县| 镇原县| 崇阳县| 建德市| 富阳市| 柳州市| 华坪县| 南京市| 称多县| 余庆县| 乌拉特前旗| 安徽省| 苍梧县| 绥宁县| 肥西县|