Vue学习10_Vue实现简易的切换登录方式

Vue实现简易的切换登录方式

示例代码：

    <div id="app">
        <!-- 这里涉及到Vue的虚拟Dom，在输入框输入的内容点击切换时，输入框内容还在，要想不复用，可以加个key，key一样复用，不一样不复用 -->

        <!-- 为v-if设置flag值，当其为true时显示账号登陆 -->
        <span v-if="flag">
            <label for="username">用户账号：</label>
            <input type="text" id="username" placeholder="用户账号" key="username">
        </span>

        <!-- 为v-else设置flag值，当其为true时显示邮箱登陆 -->
        <span v-else>
            <label for="email">邮箱地址：</label>
            <input type="text" id="email" placeholder="邮箱地址" key="email">
        </span>
        <button @click="change">切换登录</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                flag: true,
            },
            methods: {
                change() {
                    // 更改当前的flag值取反，实现切换方式
                    this.flag = !this.flag;
                }
            }
        });
    </script>

运行结果：

点击切换按钮：

由于给输入框设置了key的值，因此输入的内容不会复用：即再账号登陆界面输入的账号信息，再点击切换时，输入框内不会保留之前输入的值。这里涉及到虚拟DOM的知识点：

在vue中，由于存在虚拟DOM这一概念，当页面显示用户账号登陆的div时，在虚拟DOM中就已经对界面进行了渲染，当点击切换登录按钮时，虚拟DOM并不会立即重新创建一个div进行渲染，而是查看在虚拟DOM中是否有可复用的现成的已经渲染好的标签，在上述代码中，由于input输入框是两个div共有的，按钮也是两个div共有的，因此在虚拟DOM中不会重新创建input输入框，而是对用户账号登录中的虚拟DOM进行了复用，在不加key的情况下，input输入框两者用的其实是同一个（所以不加key在上一个界面输入的值，点击切换时还会保留），若想区分开两者间的input输入框，需要为其加上一个key属性以此来区别。