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>