一足淆、v-bind

    主要用于綁定屬性遇绞，可簡(jiǎn)寫為：屬性名='值'需五。
 例一     （圖片切換）：
   <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>

例二除呵、（選項(xiàng)卡）
      <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">點(diǎn)擊顯示隱藏</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的區(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ì)引起回流既鞠。
                 3.
                   display:none隱藏后不占據(jù)額外空間，它會(huì)產(chǎn)生回流和重繪盖文，而 visibility:hidden和opacity:0
                  元素雖然隱藏了嘱蛋，但它們?nèi)匀徽紦?jù)著空間，它們倆只會(huì)引起頁(yè)面
                   重繪五续。

三洒敏、v-if、v-else 疙驾、v-else-if的區(qū)別

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