Vue.js中v-show和v-if指令的用法介紹

更新時間：2022年03月13日 17:04:09 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue.js中v-show和v-if指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、v-show指令

v-show指令可以用來動態(tài)的控制DOM元素的顯示或隱藏。v-show后面跟的是判斷條件，語法如下：

v-show="判斷變量"

例如：

v-show="true"，表示顯示DOM元素。

v-show="false"，表示隱藏DOM元素。

看下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                      flag:true,//布爾型
                      imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imgList">
                 <img :src="list" v-show="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

將flag變量改為false，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                    /*   flag:true,//布爾型 */
                    flag:false,//布爾型
                    imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imgList">
                 <img :src="list" v-show="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

這里只會顯示三個<li元素>，但不會顯示img元素。

二、v-if指令

v-if指令的用法和v-show指令的用法相同，都是用來控制DOM元素的顯示或隱藏。代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                    flag:true,//布爾型 
                    imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imgList">
                 <img :src="list" v-if="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

三、v-show和v-if的區(qū)別

v-show和v-if都可以用來控制DOM元素的顯示或隱藏，那么這兩個指令有什么區(qū)別呢？

v-show和v-if指令的區(qū)別主要在于設(shè)置DOM元素隱藏的時候：

v-show指令設(shè)置隱藏是為該元素添加css樣式--display:none,但DOM元素還存在
v-if指令設(shè)置隱藏是將DOM元素整個刪除，DOM元素不在存在

看下面的示例：

v-show設(shè)置隱藏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                    /*   flag:true,//布爾型 */
                    flag:false,//布爾型
                    imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="(list,index) in imgList">
                 <!-- <img :src="list" v-show="flag" style="height:100px;width:300px;"> -->
                 <!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
                 <img :src="list" v-show="index==1" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

檢查元素：

從生成的HTML結(jié)構(gòu)中可以看出，索引不等于的元素被隱藏了，只是添加了CSS樣式：display:node，但是該元素還存在。下面看看v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實例
           new Vue({
               el:"#my",
               data:{
                    flag:true,//布爾型 
                    imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="(list,index) in imgList">
                 <!-- <img :src="list" v-if="flag" style="height:100px;width:300px;"> -->
                  <!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
                  <img :src="list" v-if="index==1" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

檢查元素：

從生成的HTML結(jié)構(gòu)中可以看出，索引不等于1的元素被隱藏了，這里是直接刪除了img元素，不占用位置。

更詳細(xì)的區(qū)別：（借鑒別人博客內(nèi)容，博客地址：//m.fzitv.net/article/240646.htm）

1.手段：v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱；
2.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡單的基于css切換；
3.編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
4.性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
5.使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。

四、v-else指令

v-else指令不需要表達(dá)式，但有一個限制條件：前一兄弟元素必須有v-if或者v-else-if指令。

用法：為v-if或者v-else-if添加“else 塊”。

看下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue指令：v-if v-else</title>
    <!--引入vue.js-->
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>num值：{{num}}</h1>
        <div v-if="num > 5" id="div1">
             Now you see me
        </div>
        <!--v-else指令不需要表達(dá)式，配合前面的v-if使用-->
        <div v-else>
            Now you don't
        </div>
    </div>
    <script>
            // 實例化Vue對象
            var vm = new Vue({
                // 掛載元素
                el:"#app",
                data:{
                    num:Math.random()
                },
                methods:{
     
                }
            });
         </script>
</body>
</html>

瀏覽器運行結(jié)果：

可以看到：num的值不大于5，所以v-if表達(dá)式的值為false，所以會顯示v-else指令所在標(biāo)簽。

五、v-else-if

v-else-if使用限制：前一兄弟元素必須有v-if或者v-else-if。

用法：v-else-if表示v-if的“else-if”塊，可以鏈?zhǔn)秸{(diào)用。

看下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue指令：v-if v-else</title>
    <!--引入vue.js-->
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- <h1>num值：{{num}}</h1>
        <div v-if="num > 5" id="div1">
             Now you see me
        </div> -->
        <!--v-else指令不需要表達(dá)式，配合前面的v-if使用-->
        <!-- <div v-else>
            Now you don't
        </div> -->

        <div v-if="type === 'A'">
             A 
        </div>
        <div v-else-if="type === 'B'">
             B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>
    <script>
            // 實例化Vue對象
            var vm = new Vue({
                // 掛載元素
                el:"#app",
                data:{
                    num:Math.random(),
                    type: 'B'
                },
                methods:{
     
                }
            });
         </script>
</body>
</html>

瀏覽器運行結(jié)果：