小編給大家分享一下Vue.js中v-show和v-if指令怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
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" >
</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" >
</li>
</ul>
</div>
</body>
</html>運行效果：
這里只會顯示三個<li元素>，但不會顯示img元素。
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" >
</li>
</ul>
</div>
</body>
</html>運行效果：
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" > -->
<!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
<img :src="list" v-show="index==1" >
</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" > -->
<!--索引等于1的時候顯示，索引不等于1的時候隱藏-->
<img :src="list" v-if="index==1" >
</li>
</ul>
</div>
</body>
</html>檢查元素：
從生成的HTML結構中可以看出，索引不等于1的元素被隱藏了，這里是直接刪除了img元素，不占用位置。
更詳細的區別：（借鑒別人博客內容，博客地址：//www.dadijd.cn/article/240646.htm）
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-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指令不需要表達式，配合前面的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-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">
<!-- <h2>num值：{{num}}</h2>
<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>瀏覽器運行結果：
以上是“Vue.js中v-show和v-if指令怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
