display:none与visibility:hidden

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

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)
}
})