v-show v-if v-bind 和display与visibility的区别

一、v-show和v-if：
v-show和v-if都可以控制元素的显示或隐藏，但是v-show是用display控制元素显示隐藏的，而v-if是用visibility控制的；
v-show 例：

  <div class="banner">

   <p>此内容可见</p>
   <p v-show="!see">此内容不可见</p><!--display:none -->
   </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.banner',
        data:{
            see:true
        }
    })
</script>

例2：
点击显示/隐藏：

    <div id="header">
   <button v-on:click="btn">隐藏/显示</button>
   <div class="banner" v-show="see"></div>
   </div>
<script src="vue.js"></script>
<script>
   new Vue({
       el:"#header",
       data:{
           see:true
       },
       methods:{
           btn:function(){
              this.see=!this.see
           }
       }
   }) 
</script>  

v-if 例：

  <div class="banner">
   <p>此内容可见</p>
   <p v-if="!see">此内容不可见</p><!--visibility:hidden -->
   </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.banner',
        data:{
            see:true
        }
    })
</script>

二、v-bind:属性名=“” ：绑定属性
例：

    <div class="itany">
   <img v-bind:src="url" alt="" @click="btn">
   </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.itany',
        data:{
            url:'img/1.jpg',
            list:'img/2.jpg'
        },
        methods:{
            btn:function(){
                this.url=this.list
            }
        }
    })
</script>

练习：点击li切换所对应的图片

  <div id="itany">
  <img v-bind:src="arr" alt="">
   <ul>
       <li v-for="(value,index) in url" @click="btn(index)">{{index+1}}</li>
   </ul>
 </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            arr:"img/1.jpg",
            url:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
        },
        methods:{
            btn:function(ind){
                this.arr=this.url[ind]
            }
        }
    })
</script>

display和visibility的区别：

display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。
display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。