今天的码农女孩学习了关于v-if和v-show指令的知识

v-if条件渲染案例：用户登录时点击按钮可以切换使用用户登录还是邮箱地址登录

    <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号</label>
            <input type="text" id="username" placeholder="用户账号" key="username">
        </span>
        <span v-else>
            <label for="useremail">用户邮箱</label>
            <input type="text" id="useremail" placeholder="用户邮箱" key="useremail">
        </span>
        <button @click="isUser=!isUser">切换类型</button>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                isUser:true
            }
        })
    </script>

v-show的使用

v-show和v-if区别：
v-show是设置css的display属性进行隐藏，v-if是删除了标签
v-show标签只编译一次，v-if标签会多次创建和销毁
v-show只用于减少数据渲染，v-if可以做权限判断和动态数据加载

所以，当需要在显示与隐藏之间切换很频繁时，使用v-show，当只有一次切换是，使用v-if

    <div id="app">
        <!-- v-if：当条件为false时，包含v-if指令的元素，根本不会存在dom中-->
        <h2 v-if="isShow" id="isIf">{{message}}</h2>
        <!-- v-show：当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none -->
        <h2 v-show="isShow" id="isShow">{{message}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello',
                isShow:true
            }
        })
    </script>