vue中的模板复用问题---什么情况下会模板复用？

Question

    const app=new Vue({
            el:`#app`,
            data:{
                key2:`username`
            },
            methods:{
                changeFun(){
                    this.key2=this.key2==`username`?`email`:`username`
                }
            }
        })
        html:
        <div id='app' v-clock>
        <template v-if='key2==`username`'>
                <label>用户名：</label>
                <input type="" name="" id="user" value="" placeholder="请输入用户名"/>
        </template>
        <template v-else-if='key2==`email`'>
                <label>邮箱：</label>
                <input type="" name="" id="email" value="" placeholder="请输入邮箱"/>
        </template>
        <button @click='changeFun'>点击</button>
    </div>
        这种情况下如果输入用户名user，再点击改变key2的值，这时‘邮箱’的输入框里会保留上一次输入的值user,因为发生了模板复用。
        问题：
        <template v-if='key2==`username`'>
                        <div>
                            <label>用户名：</label>
                            <input type="" name="" id="user" value="" placeholder="请输入用户名"/>
                        </div>  
                    </template>
                    <template v-else-if='key2==`email`'>
                    <div>
                            <label>邮箱：</label>
                            <input type="" name="" id="email" value="" placeholder="请输入邮箱"/>
                            </div>
        </template>
        当我将两个input框用div包裹后，下一次点击不会保留上一次的值，这是什么原因呢？

Answer 1

在你的服务器上用session cookie保存