vue基础（3）（v-show、v-if、v-bind命令、图片切换实例）

v-show

根据表达式的真假，切换元素的隐藏和显示

根据操作dom树切换状态

v-show的属性值可以使布尔值、数据、和判断式，只要可以被解析成布尔值即可

<div id="app">
        <input type="button" value="change" @click="changeShow">
        <img src="../img/lll.jpg" alt="没了" v-show="true">
        <img src="../img/lll.jpg" alt="没了" v-show="isshow">
        <img src="../img/lll.jpg" alt="没了" v-show="age>16">
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isshow:true,
                age:16
            },
            methods:{
                changeShow:function(){
                    this.isshow=!this.isshow;
                }
            }


        })

    </script>

v-if命令

根据表达式的真假切换元素的显示和隐藏（操纵DOM元素）

实例：通过点击按钮控制内容是否出现

<div id="app">
        <button @click="changeShow">change</button>
        <p v-if="isshow">content here v-if</p>
        <p v-show="isshow">content here v-show</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isshow:true,
                age:16
            },
            methods:{
                changeShow:function(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

v-if，v-show之间的区别如下

显示时

隐藏时

v-if会直接改变dom树，在树中直接进行增加减少（性能消耗大）
v-show改变的是display的属性值（样式 ）（性能消耗小）

一般需要频繁更改显示隐藏的用v-show

v-bind命令

设置元素的属性

v-bind:src=" " 可以等价成为 :src=" "

设置类名时，可以用三元法，也可以使用对象的方法
例如

:class="{active:isActive}

的意思是类是不是active取决于isActive是否为true

 <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <!-- 简写 -->
        <!-- 三元法添加样式 -->
        <img :src="imgSrc" alt=""  :title="imgtitle+'!'" :class="isActive?'active':''" @click="changeActive">
        <!-- 对象的方法添加样式 -->
        <img :src="imgSrc" alt=""  :title="imgtitle+'!'" :class="{active:isActive}" @click="changeActive">

    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"../img/lll.jpg",
                imgtitle:"titlename",
                //类名
                isActive:false,
            },
            methods:{
                changeActive:function(){
                    this.isActive=!this.isActive;
                }
            }


        })

    </script>

案例：图片切换

点击按钮切换图片（图片按键轮换）

切换到最后一张照片时后边的箭头隐藏起来了，同理前一张

切换图片的本质是更改页面内图片的src属性