2018-09-14 vue初学四(1.v-bind图片切换2.v-show及v-if的使用3.v-if/v-else/v-else-if)

1.切换图片（2张）

使用了v-bind来实现 简写 :属性名=“”

v-bind绑定一个属性

<div id="itany">
        <img v-bind:src="url" alt="" @click="fun"/> //先用bind绑定属性在添加click进行切换图片
</div>
<script>
        new Vue({
            el:"#itany",
            data:{
                url:"img/1.jpg",
                bool:true    //创建一个进行判断的值
            },
            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，点击时将url图片切换成arr中的图片
    <ul>
        <li v-for="(val,index) in arr" @click="fun(index)">{{index+1}}</li> //遍历出下标来
    </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标签，在这里加上v-show 
    </div>
    <script>
        new Vue({
            el:".itany",
            data:{
                add:"hello vue!",
                see:true  //用于判断
            }
        })
</script>

3.2隐藏和显示

<div class="itany">
    <button @click="fun1">点击隐藏</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){        //第一种方法进行if判断真是变假，相反变真
                    this.see=!true
                }else{
                    this.see=true
                }*/
                this.see=!this.see   //第二种方法:进行赋值
            }
        }
    })
</script>

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

toFixed(n) 保留小数，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>