6. 條件渲染

條件渲染指令

• v-if 與 v-else
• v-show

比較 v-if 與 v-show

• 若是須要頻繁切換 v-show 較好
• 當條件不成立時, v-if 的全部子節點不會解析(項目中使用)

編碼

<div id="demo">
	<h2 v-if="ok">表白成功</h2>
	<h2 v-else>表白失敗</h2>
	<h2 v-show="ok">求婚成功</h2>
	<h2 v-show="!ok">求婚失敗</h2>
	<br>
<button @click="ok=!ok">切換</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el: '#demo',
	data: {
		ok: false
	}
})
</script>