4. v-if切换时候的注意点

首先，我们要实现一个登陆切换的功能，点击按钮切换用户名登陆或者邮箱账号登陆

<div id="app">
        <div v-if="flag">
            <label for="userName">用户名:</label>
            <input type="text" placeholder="请输入用户名" >
        </div>
        <div v-else>
            <label for="email">用户邮箱:</label>
            <input type="text" placeholder="请输入邮箱" >
        </div>
        <button @click="change">切换类型</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                change() {
                    this.flag = !this.flag;
                }
            }
        });
    </script>

代码很简单，但是有问题，当我们在用户名输入内容的时候，我们突然又想使用邮箱登陆了，这时点击切换，我们输入的内容并不会清空，有时这种效果很好，但更多的时候，这不是我们想要看到的😕，所以，我们需要了解一下为什么会出现这种情况，😀，造成这种情况的原因就是因为Vue在渲染dom的时候，加了一个虚拟dom的操作，这个虚拟dom会对相同的内容直接复用已经存在的内容，并不是重新生成一个新的dom，这就是问题的原因，至于什么是虚拟dom，现在的我也不知道😰，解决的办法就是给每个input加上一个key属性，属性值一样的话就会直接从复用，属性值不一样的话，就生成一个新的dom

修改代码如下：

<div id="app">
        <div v-if="flag">
            <label for="userName">用户名:</label>
            <input type="text" placeholder="请输入用户名" key="key">
        </div>
        <div v-else>
            <label for="email">用户邮箱:</label>
            <input type="text" placeholder="请输入邮箱" key="key2">
        </div>
        <button @click="change">切换类型</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                change() {
                    this.flag = !this.flag;
                }
            }
        });
    </script>