练习

v-bind

<div id='itnay'>
   <img v-bind:src="url">
</div>
<script src='js/vue.js'></script>
<script>
  new Vue({
    el:"#itany",
    data:{
      url:"img/1.jpg"
    }
  })

图片切换

<div id='itany'>
    <img v-bind:src='url'  v-on:click='chg'>
</div>
<script src='js/vue.js'></script>
<script>
    new Vue(}
        el:"#itany",
        data:{
            rul:"img/1.jpg",
            flag:true
        },
        methods:{
            chg: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 id="itany">
  <img v-find:src="url">
  <ul>
    <li v-for="(val,ind) in list" v-on:click='chg(index)'>{{index+1}}</li>
  </ul>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#itany",
    data{
      url:"img/1.jpg",
      list:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
    },
    methods:{
      chg:function(ind){
      this.url=this.list[ind]
      }
    }
  })
</script>

v-if , v-else , v-else-if

<div id="itany">
  <p v-if="num==0">0</p>
  <p v-else-if="num==1">1</p>
  <p v-else-if="num==2">2</p>
  <p v-else-if="num==3">3</p>
  <p v-else-if="num==4">4</p>
  <p v-else="num==5">5</p>
</div>
<script src="js/vue.js">
  new Vue({
    el:"#itany",
    data:{
      num:Math.floor(Math.random()*(5-0+1)+0)
    }
  })
</script>

v-show

<div id="itany">
  <p>{{msg}}</p>
  <h1 v-show="!see">{{msg}}</h1>
  <h1 v-if="!see">{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#itany",
    data:{
      msg:"kello vue",
      see:true
    }
  })
</script>

v-show切换

<div id='itany'>
       <button v-on:click='chg'>点击切换</button>
       <div class='box' v-show='see'></div>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#itany',
           data:{
               see:true
           },
           methods:{
               chg:function(){
                this.see=!this.see   
               }
           }    
       })
    </script>