一、v-show指令
v-show指令可以用來動態的控制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(){ // 構建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(){ // 構建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(){ // 構建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的區別
v-show和v-if都可以用來控制DOM元素的顯示或隱藏，那么這兩個指令有什么區別呢？
v-show和v-if指令的區別主要在於設置DOM元素隱藏的時候：
v-show指令設置隱藏是為該元素添加css樣式--display:none,但DOM元素還存在
v-if指令設置隱藏是將DOM元素整個刪除，DOM元素不在存在
看下面的示例：
v-show設置隱藏：
<!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(){ // 構建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結構中可以看出，索引不等於的元素被隱藏了，只是添加了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(){ // 構建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結構中可以看出，索引不等於1的元素被隱藏了，這里是直接刪除了img元素，不占用位置。
更詳細的區別：（借鑒別人博客內容，博客地址：https://www.cnblogs.com/wmhuang/p/5420344.html）
1.手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱；
2.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換；
3.編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
4.性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
5.使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。
三、v-else指令
v-else指令不需要表達式，但有一個限制條件：前一兄弟元素必須有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指令不需要表達式，配合前面的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>
瀏覽器運行結果：
可以看到：num的值不大於5，所以v-if表達式的值為false，所以會顯示v-else指令所在標簽。
四、v-else-if
v-else-if使用限制：前一兄弟元素必須有v-if或者v-else-if。
用法：v-else-if表示v-if的“else-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>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指令不需要表達式，配合前面的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>
瀏覽器運行結果：
