display:none與visibility:hidden
1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產(chǎn)生回流（當(dāng)頁面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時就是回流。所有頁面第一次加載時需要產(chǎn)生一次回流），而visibility切換是否顯示時則不會引起回流。
display:none隱藏后不占據(jù)額外空間，它會產(chǎn)生回流和重繪，而visibility:hidden和opacity:0元素雖然隱藏了，但它們?nèi)匀徽紦?jù)著空間，它們倆只會引起頁面重繪。
1、v-bind
<div id='itany'>
<img v-bind:src="url">
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
2、v-show
<div id="star">
<p>{{msg}}</p>
<h1 v-show="!true">{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#star',
data:{
msg:'hello Amy',
see:true
}
})
3、v-if v-else-if v-else
<div id='itany'>
<p v-if="num==0">0000000000000000</p>
<p v-else-if="num==1">111111111111</p>
<p v-else-if="num==2">2222222222222</p>
<p v-else-if="num==3">333333333333</p>
<p v-else-if="num==4">444444444444</p>
<p v-else='num==5'>55555555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()(max-min+1)+min)
num:Math.floor(Math.random()(5-0+1)+0)
}
})
