SOURCE

new Vue({
    el: "#app",
    data: {
        loginType: "username",
        key: false,
        text: "点击看有KEY的情况"
        
    },
    methods: {
        handleToggle() {
            if (this.loginType === "username") {
                this.loginType = "email"
            } else if (this.loginType === "email") {
                this.loginType = "username"
            }
        },
        changeKey() {
            this.key = !this.key
        }
    }
})

<!-- 在input没有内容时点击按钮切换，和在input输入内容后再点击按钮切换，观察input的值变化 -->
<div id="app">
    <!--不添加key的效果 -->    
    <div v-if="!key">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input style="background: red;" placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input style="background:orange" placeholder="Enter your email address">
        </template>
    </div>
    
    <!--添加key的效果 -->
    <div v-else>
        <template v-if="loginType === 'username'" >
            <label>Username</label>
            <input placeholder="Enter your username" key="uername">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email">
        </template>
    </div>
    <button v-on:click="handleToggle">点击切换</button>
    <br/>
    <br/>
    <button v-on:click="changeKey">点击切换有KEY和无KEY的情形</button>
</div>