Vue: 用 key 管理可复用的元素

<div id="login">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username">
    </template>
    <template v-else="loginType==='email'">
        <label>Email</label>
        <input placeholder="Enter your email address" key="email">
    </template>
    <button v-on:click="typeClick">Toggle login type</button>
</div>
 
<script>
    var login = new Vue({
        el: "#login",
        data: {
            loginType: "username"
        },
        methods: {
            typeClick: function(){
                return this.loginType === "username"?this.loginType="email":this.loginType="username"
            }
        }
    })
</script>