使用display：none和visibility：hidden隐藏的区别
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
一、 v-show 控制元素显示与隐藏
html代码：
<div class="itany">
<p>此内容可见</p>
<p v-show="!see">此内容不可见</p>
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
see:true
}
})
</script>
v-show 是用display控制的隐藏与显示
二、 v-if 控制元素显示与隐藏
html代码：
<div class="itany">
<p>此内容可见</p>
<p v-if="!see">此内容不可见</p>
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
see:true
}
})
</script>
v-if是用visibility:hidden来控制的
三、v-bind 绑定属性
html代码：
<div class="itany">
<img v-bind:src="url" alt="" v-on:click="an">
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
url:"1.jpg",
hre:"2.jpg"
},
methods:{
an:function(){
this.url=this.hre
}
}
})
</script>
点击隐藏/显示
html代码：
<div class="itany">
<button v-on:click="ane">点击隐藏</button>
<div class="an" v-show="see"></div>
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
see:true
},
methods:{
ane:function(){
this.see=!this.see
}
}
})
</script>
效果图：
1.png
点击图片换图：
html代码：
<div class="itany">
<img v-bind:src="url" alt="" v-on:click="an">
</div>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
url:"1.jpg",
hre:"2.jpg"
},
methods:{
an:function(){
this.url=this.hre
}
}
})
</script>
效果图：
2.png
绑定切图：
html代码：
<div class="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(v,index) in arr" v-on:click="btn(index)">{{index+1}}</li>
</ul>
</div>
css代码：
<style>
ul{
overflow: hidden;
}
li{
list-style: none;
float: left;
width: 50px;
height: 20px;
border: 1px solid #000;
text-align: center;
}
</style>
js代码：
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
url:'psb (6).jpg',
arr:['psb (6).jpg','5.jpg','4.jpg','3.jpg','2.jpg'],
},
methods:{
btn:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
效果图：
3.png
