在下面的代碼中,如果input
後面不加key
屬性的話,則在切換登錄方式時,原本輸入在input
框裏的字符不會消失。這是vue底層的實現。
當希望input
框裏面的內容因爲切換登錄方式而消失時,可以在後邊加上key
屬性,用來標識不同的input
標籤。
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用戶賬號</label>
<input type="text" id="username" placeholder="用戶賬號" key="111">
</span>
<span v-else>
<label for="useremail">用戶郵箱</label>
<input type="text" id="useremail" placeholder="用戶郵箱" key="222">
</span>
<button @click="isUser = ! isUser">切換登錄方式</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isUser: true,
},
})
</script>
</body>