Vue學習（條件渲染）

條件渲染
顯示文本的Vue對象

var vm = new Vue({
	el:"#app",
	data:{
		boo:true,
		score:100,
		isShow:true,
		isOK:true
	}
			
});

v-if單獨使用
v-if 是true正的條件渲染，如果條件爲false，則不會渲染條件塊。

<div id="app">
	<div v-if="isOk">world</div>
</div>	

v-if和v-else連用
當v-if中的條件爲true顯示，爲false時執行v-else，v-else不需要寫條件。例如：boo爲true顯示第一句，爲false就顯示第二句。

<div id="app">
	<p v-if="boo">你還好嗎？</p>
	<p v-else>不好</p>
</div>	

v-if、v-else-if和v-else連用
這裏注意v-else-if和v-else 一定是出現在v-if後

<div id="app">
	<p v-if="score>=90">優秀</p>
	<p v-else-if="score>=60">及格</p>
	<p v-else>不及格</p>
</div>	

還有一種顯示隱藏文本的指令v-show

<div id="app">
	<div v-show="isShow">hello</div>
</div>	

v-show與v-if的區別
v-show指令的元素會被渲染保留在DOM中，只是給元素加入了display:none；屬性後被隱藏了，當被隱藏時在瀏覽器的開發者模式中可以看見被元素是存在的。
v-if指令的元素條件爲false時則不會保留在DOM中，在瀏覽器中看不見條件爲假的DOM元素。適合更高的切換開銷，所以說，如果判斷條件很少改變，則應該使用v-if。