1、v-once
只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視爲靜態內容並跳過。
代碼：
<body>
<div id="app">
<p v-once>原始值: {{msg}}</p>
<p>後面的: {{msg}}</p>
<input type="text" v-model="msg">
</div>
<!--引入本地vue.js文件-->
<script src="js/vue.js"></script>
<script>
// 1. 創建Vue的實例
new Vue({
el: '#app',
data: {
msg: 'Hello'
}
});
</script>
2、v-if
根據表達式的值的真假條件渲染元素。當v-if爲真時，會顯示元素。
圖示：
代碼：
<div id="app">
<p v-if="show">顯示出來!</p> <!--當show值爲true時，顯示出來-->
<p v-if="hide">不顯示出來!</p> <!--當hide值爲false時，不顯示出來-->
<p v-if="height > 1.5">小明的身高:{{height}}</p> <!--當height值大於1.5時，纔會顯示出來-->
</div>
<!--引入本地vue.js文件-->
<script src="js/vue.js"></script>
<script>
// 1. 創建Vue的實例
new Vue({
el: '#app',
data: {
show: true,
hide: false,
height: 1.68
}
});
</script>
3、v-show
根據表達式之真假值，切換元素的 display CSS 屬性。
v-show和v-if的區別：
v-if 是真實的條件渲染，因爲它會確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子組件； v-show 則只是簡單地基於 CSS 切換。
v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
圖示：
4、v-else
限制：前一兄弟元素必須有 v-if 或 v-else-if
圖示：
代碼：
<body>
<div id="app">
<div v-if="num > 0.5">
{{num}},大於0.5
</div>
<div v-else>
{{num}},小於0.5
</div>
</div>
<script src="js/vue.js"></script>
<script>
// 1. 創建Vue的實例
new Vue({
el: '#app',
data: {
num: Math.random()
}
});
</script>
5、v-else-if
限制：前一兄弟元素必須有 v-if 或 v-else-if。
圖示：
代碼：
<body>
<div id="app">
<p>輸入的成績對應的等級:</p>
<input type="text" v-model="score">
<div>
<p v-if="score >= 90">優秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
</div>
</div>
<script src="js/vue.js"></script>
<script>
// 1. 創建Vue的實例
new Vue({
el: '#app',
data: {
score: 90 // 優秀 良好 及格 不及格
}
});
</script>