一、v-bind

    主要用于绑定属性，可简写为：属性名='值'。
 例一     （图片切换）：
   <div id="app">
        <img v-bind:src="url" v-on:click="alt"/>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el :"#app",
            data :{
                url:"img/6.jpg",
                flag:true
            },
            methods:{
                alt:function(){
                    if(this.flag){
                        this.url='img/7.jpg';
                        this.flag=false
                    }else{
                        this.url='img/6.jpg';
                        this.flag=true
                    }
                }                   
            }
            
        })
    </script>

例二、（选项卡）
      <div id="app">
        <img v-bind:src="url" alt="">
        <ul>
            <li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
        </ul>

    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                url: 'img/6.jpg',
                list: ['img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg']

            },
            methods: {
                chg: function(ind) {
                    this.url = this.list[ind]
                }
            }

        })
    </script>

二、v-show （ display:none）， v-if （visibility:hidden）; 都用于 控制元素的显示与隐藏

   例一：
           <div id="app">
        <p>{{msg}}</p>
        <h1 v-show="!see">{{msg}}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'v-show 控制元素的显示与隐藏',
                see: true

            }
        })
    </script>

   例二 、
           <div id="app">
        <button v-on:click="alt">点击显示隐藏</button>
        <div class="box" v-show="see"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                see:true
            },
            methods:{
                alt:function(){
                    /*  方法一
                     * this.see=!this.see*/
                    
                    /*方法二*/
                    if(this.see){
                        this.see=false
                    }else{
                        this.see=true
                    }
                }
            }
        })
    </script>

     注： display:none与visibility:hidden的区别：   
               1.
                  display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是
                  视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
                2.
                  使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产
                  生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此
                  时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不
                  会引起回流。
                 3.
                   display:none隐藏后不占据额外空间，它会产生回流和重绘，而 visibility:hidden和opacity:0
                  元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面
                   重绘。

三、v-if、v-else 、v-else-if的区别

       <div id='app'>
        <p v-if="num==0">0000</p>
        <p v-else-if="num==1">111</p>
        <p v-else-if="num==2">2222</p>
        <p v-else-if="num==3">333</p>
        <p v-else-if="num==4">44</p>
        <p v-else='num==5'>5555</p>
    </div>
    <script src='js/vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                //               num:Math.floor(Math.random()*(max-min+1)+min)
                num: Math.floor(Math.random() * (5 - 0 + 1) + 0)
            }
        })
    </script>