五狂窑、Vue的條件渲染（v-if媳板、v-show、v-for指令）
v-if（控制DOM的存在與否）泉哈、v-show（控制DOM的顯示與否）
v-if和v-show效果類似蛉幸，都是控制內(nèi)容是否顯示出來，但是還是有區(qū)別的
舉個(gè)例子：
<body>
<div id="root">
<div v-if="show">hello world</div>
<button v-on:click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:false,
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</body>
當(dāng)show為false時(shí)匹层，div標(biāo)簽的相關(guān)內(nèi)容顯示不出來，從控制臺(tái)可以看出锌蓄，div標(biāo)簽里的內(nèi)容是直接被注釋了升筏，所以顯示不出來；
但是當(dāng)v-if改成v-show時(shí)瘸爽，顯示的結(jié)果是一樣的仰冠，但是操作卻不一樣，打開控制臺(tái)可以看到：
標(biāo)簽以及標(biāo)簽里的內(nèi)容還是有的蝶糯，但是div標(biāo)簽的display屬性顯示的是none洋只，導(dǎo)致該標(biāo)簽內(nèi)容顯示不出來
總結(jié)一下v-if和v-show的共性和區(qū)別：
v-if和v-show都可以使標(biāo)簽的內(nèi)容顯示或者不顯示，從結(jié)果上來看昼捍，兩個(gè)指令的差別不是很大识虚，但是v-if是直接把標(biāo)簽以及內(nèi)容注釋掉，v-show是利用屬性將內(nèi)容隱藏妒茬；利用這兩個(gè)指令的區(qū)別担锤，當(dāng)使用的次數(shù)不多的時(shí)候，可以用v-if乍钻，當(dāng)使用的次數(shù)較多的時(shí)候肛循，用v-show可以提高效率铭腕。
有v-if指令，相對(duì)應(yīng)的也就會(huì)有v-else指令多糠，使用的時(shí)候可以解釋為當(dāng)滿足if的條件時(shí)累舷，執(zhí)行if條件下的指令；不然就執(zhí)行v-else條件下的指令夹孔。
例子如下：
<body>
<div id="app">
<div v-if="show">{{message}}</div>
<div v-else>Bye World</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:false,
message:"Hello World"
}
})
</script>
</body>
這就是當(dāng)v-if為false時(shí)被盈，將不執(zhí)行v-if的內(nèi)容，而是執(zhí)行v-else的內(nèi)容搭伤。
注意：v-if標(biāo)簽和v-else標(biāo)簽一定要在一起使用只怎，兩個(gè)標(biāo)簽之中不能添加其他的標(biāo)簽，否則會(huì)報(bào)錯(cuò)
還可以寫更復(fù)雜的表達(dá)式怜俐，例子如下：
<body>
<div id="app">
<div v-if="show === 'a'">This is A</div>
<div v-else-if = "show ==='b'">
This is B
</div>
<div v-else>This is others</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:'b'
}
})
</script>
</body>
這個(gè)例子中用到了v-if身堡，v-else-if，v-else三個(gè)指令語句拍鲤，當(dāng)哪個(gè)符合條件時(shí)盾沫，哪個(gè)就會(huì)顯示出來，實(shí)例里殿漠，data中顯示的是show：b赴精，這個(gè)符合v-else-if的指令，所以就執(zhí)行This is B指令绞幌。
當(dāng)然蕾哟，這三個(gè)指令也是不可以分開的。
v-for指令（控制一組數(shù)據(jù)莲蜘，來循環(huán)顯示頁面上的DOM結(jié)構(gòu)）
可以理解為對(duì)于列表中的項(xiàng)進(jìn)行依次展示谭确，舉個(gè)例子：
<body>
<div id="root">
<div v-show="show">hello world</div>
<button v-on:click="handleClick">toggle</button>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:false,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</body>
此例中，Vue實(shí)例的數(shù)據(jù)項(xiàng)增添了列表list項(xiàng)票渠，模板中增加了v-for指令逐哈，標(biāo)簽內(nèi)容是item；
故當(dāng)有一個(gè)數(shù)據(jù)需要依次羅列的時(shí)候昂秃，v-for可以用的到，
