浮力王捕鱼机一体机怎样接线视频

書名： 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，則一開始元素/組件并不會渲染，只有當條件第一次變為真時才開始編譯。

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

Vue.js從入門到項目實踐（超值版）

3.1.2 條件指令

1．v-if

2．v-else

3．v-else-if

4．v-show

3.1.2　條件指令