v-bind 绑定一个属性

<div class='app'>
  <img v-bind:src="url">
</div>
<script>
new Vue({
  el:".app",
  data:{
   url:'img/1.jpg'
}

})

</script>

v-shou显示隐藏

###点击隐藏图片
<div class='app'>
  <img v-bind:src="url">
<p><button v-on:click="aa">点击隐藏</button></p>
<img v-bind:src="url" v-show="see">
</div>
<script>
new Vue({
        el:".app",
        data:{
            url:'1.jgp',
            see:true
         },
           methods:{
              aa;function(){
                 this.see=!this.see  //方法一
                  //方法二
                if(this.see){
                        this.see=false
                }else{
                        this.see=true
                  }
          }


         }

})

</script>


###隐藏文字
<div>
<p>{{mag}}</p>
//!see 非显示
<h1 v-shou="!see">{{mag}}</h1>
</div>
<script>
    new Vue({
          el:".app",
          data:{
                mag:"ni hao",
                see:true
          }
    })
</script>

vue切换图片

<div class='app'>
  <img v-bind:src="url">
  <ul>
      <li v-for="(a,index) in list" v-on:click="chg(index)">{{index+1}}</li>
  </ul>
</div>

<script>
    new Vue({
      el:".app",
      data:{
          list:["1.jpg",'2.jpg"],
          url:''1.jpg"
      },
      methods:{
              chg:function(ind){
              this.url=this.list[ind]
      }
}

})
</script>

来回切换图片

<div>
<img v-bind:src="1/jpg" v-on:click="aa">
</div>
<script>
  new Vue({
      el:".app",
      data:{
          url:"1.jpg",
          flag:true
      },
      methods:{
          aa:function(){
              if(this.flag){
                    this.url="2.jpg"
                    this.flag=false
              }else{
                  this.url="1.jpg"
                  this.flag=true
              }
          }
      }
})
</script>

v-if v-else-if v-else

//随机数公式
//Math.floor(Math.random()*(max-min+1)+min)
<div class="app">
  <p v-if="num==0">000</p>
  <p v-else-if="num==1">111</p>
  <p v-else-if="num==2">222</p>
  <p v-else-if="num==3">333</p>
  <p v-else-if="num==4">444</p>
  <p v-else="num==5">555</p>
</div>
<script>
    new Vue({
        el:'.app',
        data:{
            //生成一到五的随机数
            num:Math.floor(Math.random()*(5-0+1)+0)
        }
    })
</script>

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

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