v-bind:綁定一個(gè)屬性 
 v-bind:屬性名="";可簡(jiǎn)寫(xiě)為：屬性名=""
    <div class="box">
        <img v-bind:src="url" alt="">
        <a :href="url">鏈接</a>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                url:"img/1.jpg"
            }
        })
    </script>


<!--用v-bind寫(xiě)圖片切換-->
    <div class="box">
        <img v-bind:src="url" alt="" v-on:click="fun">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                url:"img/1.jpg",
                flag:true//困難問(wèn)題要習(xí)慣應(yīng)用中間量
            },
            methods:{
                fun:function(){
                    if(this.flag){
                        this.url="img/2.jpg";
                        this.flag=false;
                    }else{
                        this.url="img/1.jpg";
                        this.flag=true;
                    }
                }
            }
        })
    </script>


<!--用v-bind寫(xiě)選項(xiàng)卡-->
    <div class="box">
        <img :src="url" alt="">
        <ul>
            <li v-for="(value,index) in last" v-on:click="fun(index)">{{index+1}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
               url:"img/1.jpg",
                last:["img/1.jpg","img/2.jpg","img/3.jpg"]
            },
            methods:{
                fun:function(ind){
                    this.url=this.last[ind]
                }
            }
        })
    </script>




    <!-- v-show:控制元素的顯示和隱藏  display：none  控制臺(tái)顯示
   v-if:控制元素的顯示和隱藏   visibility：hidden  控制臺(tái)不顯示-->
   <div class="box">
       <p v-show="see">{{message}}</p>
       <h1 v-if="!see">{{message}}</h1>
      <!-- 加！為反隱藏-->
   </div>
   <script src="js/vue.js"></script>
   <script>
        new Vue({
            el:".box",
            data:{
                see:true,
                message:"hello vue"
            }
        })
    </script>





    <!--用v-show寫(xiě)切換-->
    <div class="box">
        <button v-on:click="fun">切換</button>
        <div class="box-in" v-show="see"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                see:true
            },
            methods:{
                fun:function(){
                    /*方法一：this.see=!this.see*/
                    //方法二：
                    if(this.see){
                        this.see=false
                    }else{
                        this.see=true
                    }
                }
            }
        })
    </script>



 <!--用v-show寫(xiě)選項(xiàng)卡-->
    <div class="box">
        <ul>
            <li v-for="(value,index) in last" v-on:click="fun(index)">{{value}}</li>
        </ul>
        <div class="box-in" v-show="see">{{eg}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                eg:["這是選項(xiàng)一的內(nèi)容"],
               last:["選項(xiàng)一","選項(xiàng)二","選項(xiàng)三"],
                message:["這是選項(xiàng)一的內(nèi)容","這是選項(xiàng)二的內(nèi)容","這是選項(xiàng)三的內(nèi)容"],
                see:true
            },
            methods:{
                fun:function(ind){
                    this.eg=this.message[ind]
                }
            }
        })
    </script>




<!--v-if/v-else-if/v-else-->
    <!--類(lèi)似于js中的多重else···if()-->
   <div class="box">
       <ul>
          <li v-if="mum==0">0</li>
           <li v-else-if="mum==1">1</li>
           <li v-else-if="num==2">2</li>
           <li v-else-if="num==3">3</li>
           <li v-else="num==4">4</li>
       </ul>
   </div>
   <script src="js/vue.js"></script> 
   <script>
        new Vue({
            el:".box",
            data:{
                num:Math.floor(Math.random()*(4-0)+0)//隨機(jī)數(shù)公式
            }
        })
    </script>



display:none和visibility:hidden的區(qū)別是：

1.display:none是徹底消失形娇，不在文檔流中占位怪蔑，瀏覽器也不會(huì)解析該元素；visibility:hidden是視覺(jué)上消失了跑揉，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會(huì)解析該元素任柜；

2.使用visibility:hidden比display:none性能上要好枫笛，display:none切換顯示時(shí)visibility吨灭，頁(yè)面產(chǎn)生回流（當(dāng)頁(yè)面中的一部分元素需要改變規(guī)模尺寸、布局刑巧、顯示隱藏等喧兄，頁(yè)面重新構(gòu)建，此時(shí)就是回流啊楚。所有頁(yè)面第一次加載時(shí)需要產(chǎn)生一次回流）吠冤，而visibility切換是否顯示時(shí)則不會(huì)引起回流。