v-bind:绑定一个属性 
 v-bind:属性名="";可简写为：属性名=""
    <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写图片切换-->
    <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//困难问题要习惯应用中间量
            },
            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写选项卡-->
    <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  控制台显示
   v-if:控制元素的显示和隐藏   visibility：hidden  控制台不显示-->
   <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写切换-->
    <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写选项卡-->
    <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:["这是选项一的内容"],
               last:["选项一","选项二","选项三"],
                message:["这是选项一的内容","这是选项二的内容","这是选项三的内容"],
                see:true
            },
            methods:{
                fun:function(ind){
                    this.eg=this.message[ind]
                }
            }
        })
    </script>




<!--v-if/v-else-if/v-else-->
    <!--类似于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)//随机数公式
            }
        })
    </script>



display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。