美文网首页
v-show v-if v-bind 和display

v-show v-if v-bind 和display

作者: 纪美 | 来源:发表于2018-09-11 16:10 被阅读0次

    一、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则是占据原来的位置。

    相关文章

      网友评论

          本文标题:v-show v-if v-bind 和display

          本文链接:https://www.haomeiwen.com/subject/hcuugftx.html