vue常用指令（中）

1.v-show

• v-show作用：根据真假切换元素的显示状态
• 原理是修改元素的display，实现显示隐藏
• 指令后面元素内容最终都会解析为布尔值

<div id="app">
        <input type="button" value="切换" @click="changeIsShow">
        <img src="0.jpg" v-show="isShow">
        <input type="button" value="年龄+++"@click="addAge">
        <img src="0.jpg" v-show="age>=18" >
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
           isShow:false,
           age:17
        },
        methods:{
          changeIsShow:function(){
              this.isShow = !this.isShow;
          },
          addAge:function(){
              this.age++;
          }
        }
    })
    </script>

2.v-if

• 作用和v-show一样
• 本质是通过操作dom元素来切换显示
• 表达式为true，元素存在于dom树中，false，从dom树中移除
• 频繁切换用v-show，否则用v-if

   <div id="app">
   <input type="button" value="切换" @click="changeisShow">
    <p v-if="isShow">出来了</p>
    <h2 v-if="temp>35">{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"热死辽",
                isShow:true,
                temp:40
            },
            methods:{
                changeisShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>

3.v-bind

• 作用：为元素绑定属性
• 完整写法v-bind:属性名，可直接省略v-bind，简写成**:属性名**
• 如果设置的是class更建议使用对象的方式

 <div id="app">
    <img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="changeisActive">
    <br>
    <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="changeisActive">

    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgSrc:"0.jpg",
                imgTitle:"兔子",
                isActive:false
            },
            methods:{
                changeisActive(){
                    this.isActive=!this.isActive;
                }
            }
        })
    </script>

4.案例：图片切换

  <div id="app">

        <img :src="imgArr[index]">
        <a href="javascript:void(0)" @click="prev" v-show="index!=0">上一页</a>
        <a href="javascript:void(0)" @click="next" v-show="index!=imgArr.length-1">下一页</a>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgArr:[
                    "0.jpg",
                    "1.jpg",
                    "2.jpg"
                ], 
                index:0,
                isShow:true
            },
            methods:{
                prev:function(){
                  this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>