1.切換圖片（2張）

使用了v-bind來(lái)實(shí)現(xiàn) 簡(jiǎn)寫 :屬性名=“”

v-bind綁定一個(gè)屬性

<div id="itany">
        <img v-bind:src="url" alt="" @click="fun"/> //先用bind綁定屬性在添加click進(jìn)行切換圖片
</div>
<script>
        new Vue({
            el:"#itany",
            data:{
                url:"img/1.jpg",
                bool:true    //創(chuàng)建一個(gè)進(jìn)行判斷的值
            },
            methods:{
                fun:function(){
                    if(this.bool){
                        this.url="img/2.jpg";
                        this.bool=false;
                    }else{
                        this.url="img/1.jpg";
                        this.bool=true;
                    }
                }
            }
        })
</script>

2.多張圖片切換

<div id="itany">
    <img v-bind:src="url"/>  綁定url，點(diǎn)擊時(shí)將url圖片切換成arr中的圖片
    <ul>
        <li v-for="(val,index) in arr" @click="fun(index)">{{index+1}}</li> //遍歷出下標(biāo)來(lái)
    </ul>
</div>
<script>
    new Vue({
        el:"#itany",
        data:{
            url:"img/1.jpg",
            arr:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
        },
        methods:{
            fun:function(ind){
                this.url = this.arr[ind]  //將arr中的圖片賦值給url；
            }
        }
    })
</script>

3.v-show及v-if的使用

v-show及v-if都是控制元素的顯示或隱藏的但他們隱藏的方式有所不同

3.1隱藏文字

<div class="itany">
        <p>{{add}}</p>
        <h2 v-show="!see">{{add}}</h2>  //隱藏h2標(biāo)簽板辽，在這里加上v-show 
    </div>
    <script>
        new Vue({
            el:".itany",
            data:{
                add:"hello vue!",
                see:true  //用于判斷
            }
        })
</script>

3.2隱藏和顯示

<div class="itany">
    <button @click="fun1">點(diǎn)擊隱藏</button>
    <div style="width:200px;height:200px;background:red" v-show="see"></div>
</div>
<script>
    new Vue({
        el:".itany",
        data:{
            see:true
        },
        methods:{
            fun1:function(){
                /*if(this.see){        //第一種方法進(jìn)行if判斷真是變假，相反變真
                    this.see=!true
                }else{
                    this.see=true
                }*/
                this.see=!this.see   //第二種方法:進(jìn)行賦值
            }
        }
    })
</script>

4.v-if/v-else/v-else-if的使用

toFixed(n) 保留小數(shù)振乏，n代表保留幾位

取整公式:Math.floor(Math.random()*(max-main+1)+min)；

<div id=itany>    
      <p v-if="num==0">0</p>    //和if-esle-同理
      <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="num==4">4</p>
</div>
<script>
      new Vue({
            el:"#itany",
            data:{
                var num=Math.floor(Math.random()*(max-min+1)+min); //取整公式（記妆恕）
            }
      })
</script>