- Vue.js從入門到項目實踐（超值版）
- 聚慕課教育研發中心編著
- 633字
- 2022-07-29 14:27:34
3.1.2 條件指令
除了基本指令外，Vue內置指令還包含條件指令。和JavaScript的條件語句一樣，Vue的條件指令可以根據表達式的值在DOM中渲染或者銷毀元素/組件。常用的Vue條件指令有v-if、v-else、v-else-if。下面對它們及v-show進行詳解。
1．v-if
v-if：條件渲染指令，動態地在DOM內添加或刪除DOM元素。
主要用法：根據表達式值的真假判斷是否渲染元素，在切換時元素及它的數據綁定/組件被銷毀并重建。如果元素是<template>，將提出它的內容作為條件塊。
代碼如下：
運行效果如圖3-10所示。
圖3-10 v-if運行效果圖
2．v-else
v-else：條件渲染指令，必須與v-if成對使用。
主要用法：v-else元素必須緊跟在v-if或者v-else-if的后面，否則它將不會被識別。
代碼如下：
運行效果如圖3-11所示。
圖3-11 v-else運行效果圖
3．v-else-if
v-else-if：判斷多層條件，必須跟v-if成對使用。
主要用法：表示v-if的“else if”塊，可以鏈式調用。前一兄弟元素必須有v-if或v-else-if。代碼如下：
運行效果如圖3-12所示。
圖3-12 v-else-if運行效果圖
4．v-show
v-show：條件渲染指令，為DOM設置CSS的Style屬性。
主要用法：根據表達式的真假值，切換元素的CSS屬性display。當條件變化時，該指令觸發過渡效果。
提示：帶有v-show的元素始終會被渲染并保留在DOM中。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show練習</title>
</head>
<body>
<h3 v-show="ok">Hello Vue!</h3>
</body>
</html>
運行效果如圖3-13所示。
圖3-13 v-show運行效果圖
v-show的用法與v-if基本一致，只不過是改變元素的CSS屬性display。當v-show表達式的值為false時，元素會隱藏，查看DOM結構會看到元素上加載了內聯樣式display:none。v-if和v-show具有類似的功能，不過v-if才是真正的條件渲染，它會根據表達式適當地銷毀或重建元素及綁定的事件或子組件。若表達式初始值為false，則一開始元素/組件并不會渲染，只有當條件第一次變為真時才開始編譯。