溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue.js中v-show和v-if指令怎么用

發(fā)布時間：2022-03-14 09:09:04 來源：億速云 閱讀：180 作者：小新 欄目：開發(fā)技術(shù)

小編給大家分享一下Vue.js中v-show和v-if指令怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、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" >
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

Vue.js中v-show和v-if指令怎么用

將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" >
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

Vue.js中v-show和v-if指令怎么用

這里只會顯示三個<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" >
             </li>
         </ul>
    </div>
</body>
</html>

運行效果：

Vue.js中v-show和v-if指令怎么用

三、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" > -->
                 <!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
                 <img :src="list" v-show="index==1" >
             </li>
         </ul>
    </div>
</body>
</html>

檢查元素：

Vue.js中v-show和v-if指令怎么用

從生成的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" > -->
                  <!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
                  <img :src="list" v-if="index==1" >
             </li>
         </ul>
    </div>
</body>
</html>

檢查元素：

Vue.js中v-show和v-if指令怎么用

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

更詳細(xì)的區(qū)別：（借鑒別人博客內(nèi)容，博客地址：//kemok4.com/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">
        <h2>num值：{{num}}</h2>
        <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é)果：

Vue.js中v-show和v-if指令怎么用

可以看到：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">
        <!-- <h2>num值：{{num}}</h2>
        <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é)果：

Vue.js中v-show和v-if指令怎么用

以上是“Vue.js中v-show和v-if指令怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手