v-bind:属性名=‘值’ 绑定一个属性

简写：属性名=‘值’

v-show='' 控制元素的显示与隐藏 相当于display：none

逻辑运算

&&逻辑与
||逻辑或

有假与为假，有真或为真

！逻辑非 （取反）

v-if='' 控制元素的显示与隐藏 相当于 visibility:hidden

toFixed(n)保留两位小数

随机数：Math.floor(Math.random()*(max-min+1)+min)随机数

区别：

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

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

v-bind

<div id='a'>
      <img v-bing:src='url' v-on:click='alt'>
</div>
<script>
     new Vue({
             el:'#a',
            data:{
                  url:'img/1.png',
   //               al:'img/2.png'
                  flag=true
       }
         methods:{
          alt:function(){
             if(this.flag==true){
                      this.url='img/2.png';
                      this.flag=false
                 }else{
                  this.url='img/1.png';
                   this.flag=true
           }
       }

})
</script>

v-bind图片切换

<div id='a'>
      <img v-bing:src='url' v-on:click='alt'>
<ul>
     <li v-for='(val,index) in arr' v-on:click='alt(index)'>{{index+1}}</li>
</ul>
</div>
<script>
     new Vue({
             el:'#a',
            data:{
                  url:'img/1.png',
                  arr:['mg/1.png','mg/2.png','mg/3.png']
       }
         methods:{
                    alt:function(ind){
                           this.url=this.arr[ind]
         }
})
</script>

v-show=''

<div id='a'>
<p>{{mas}}</p>
<h1 v-show='!alt'>{{mas}}</h1>
</div>
<script>
new Vue({
      el:'#a',
      data:{ 
           mas:'hellow vue',
           alt:true
       }
})
</script>

v-show点击显示与隐藏

<div id='a'>
         <button v-on:click='alt'> 点击</button>
        <img v-bind:src='url' v-show='mas'>
</div>
<script>
new Vue({
        el:'#a',
        data:{
            url:'img/1.png',
            mas:true
       }
       methods:{
           alt:function(){
                  this.mas=!this.mas
                }
       }
})
</script>

v-if v-else v-else-if

<div id='a'>
     <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:'#a',
       data:{
           Math.floor(Math.random()*(5-0+1)+0)
       }
 })
</script>