Vue中的條件渲染
1.通過 v-if 指令，決定标簽是否在頁面展示或存在（當
v-if
與
v-for
一起使用時，
v-for
具有比
v-if
更高的優先級）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show">{{message}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html> 輸出：當為 true 時，顯示資料；
當為 false 時，不顯示資料；
2.v-show
v-if 和 v-show :二者在剛開始運作時均取決于 show 變量，開始均為 false ，故二者均不展示；但差別在于，v-show 的頁面實際是存在的，隻是設定成了 display:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show" data-test="v-if">{{message}}</div>
<div v-show="show" data-test="v-show">{{message}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html> 輸出：show = true 時；
show = false 時，v-if 不存在DOM中，但 v-show 存在，隻是設定成了 display:none;頻繁的顯示與隐藏中性能更高。
3.v-else
v-if 和 v-else 必須緊跟在一起使用，之間不能有其他程式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show" >{{message}}</div>
<div v-else=>Bye World</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html> 輸出：show = false 時
show = true 時
4.v-else-if
v-if 、v-else-if 和 v-else必須緊跟在一起使用，之間不能有其他程式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show ==='a'" >This is A</div>
<div v-else-if="show ==='b'" >This is B</div>
<div v-else=>This is others</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html> 輸出：開始預設是 a
輸出改為 b
輸出改為 c(和 a、b都不相同)
5.key 值
當給某個元素添加 key值 時，就會是唯一的元素，若二者 key 值不一樣則不會嘗試複用以前的标簽；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show">
使用者名：<input key="username"/>
</div>
<div v-else>
郵箱名：<input key="email"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
},
})
</script>
</body>
</html> 輸出：
show = true 時；文本框中的内容被清空
補充：若不設定 key 值，則會複用已經存在的 input 标簽
輸入改為 true
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)