7 VUE基礎：條件渲染
Vue中用來做條件渲染的指令：v-if 和v-show。
7.1 v-if條件
v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。也可以用 v-else 添加另外一個條件塊。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE 條件渲染</title>
</head>
<body>
<div id='app'>
<p v-if="isGood">今天是一個好天氣</p>
<p v-else>今天的天氣真糟糕</p>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#app',
data : {
isGood : true
}
})
</script>
</html>
因爲 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE 條件渲染</title>
</head>
<body>
<div id='app'>
<p v-if="isGood">今天是一個好天氣</p>
<p v-else>今天的天氣真糟糕</p>
<hr>
<h2>使用template包裹多個顯示項目展示</h2>
<template v-if="isPerson">
<h4>個人介紹</h4>
<p>我是黑白猿</p>
<p>我是一名項目經理</p>
</template>
<template v-else>
<h4>團隊介紹</h4>
<p>積極向上，奮勇爭先</p>
<p>打造全國一流融媒體尖兵</p>
</template>
<hr>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#app',
data : {
isGood : true,
isPerson: false
}
})
</script>
</html>
渲染結果：
7.2 v-show條件
v-show 指令用法和v-if大致一樣，用於根據條件展示元素。不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的CSS屬性 display。
注意，
v-show不支持template元素，也不支持v-else。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE 條件渲染</title>
</head>
<body>
<div id='app'>
<h2>v-show展示示例</h2>
<p v-show="isGood">今天是一個好天氣</p>
<p v-show="!isGood">今天的天氣真糟糕</p>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#app',
data : {
isGood : true,
isPerson: true
}
})
</script>
</html>
渲染結果：
7.3 v-if & v-show
v-if ：
- 真正的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
- 惰性的，如果在初始渲染時條件爲假，則什麼也不做；直到條件第一次變爲真時，纔會開始渲染條件塊。
v-if有更高的切換開銷
v-show
- 不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於CSS樣式進行切換。
v-show有更高的初始渲染開銷。
因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。