vue中虛擬複用的一個小例子

在下面的代碼中,如果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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章