v-show、v-if、v-bind display与

使用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