Vue學習10_Vue實現簡易的切換登入方式

Vue實現簡易的切換登入方式

示例程式碼：

    <div id="app">
        <!-- 這裡涉及到Vue的虛擬Dom，在輸入框輸入的內容點選切換時，輸入框內容還在，要想不復用，可以加個key，key一樣複用，不一樣不復用 -->

        <!-- 為v-if設定flag值，當其為true時顯示賬號登陸 -->
        <span v-if="flag">
            <label for="username">使用者賬號：</label>
            <input type="text" id="username" placeholder="使用者賬號" key="username">
        </span>

        <!-- 為v-else設定flag值，當其為true時顯示郵箱登陸 -->
        <span v-else>
            <label for="email">郵箱地址：</label>
            <input type="text" id="email" placeholder="郵箱地址" key="email">
        </span>
        <button @click="change">切換登入</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                flag: true,
            },
            methods: {
                change() {
                    // 更改當前的flag值取反，實現切換方式
                    this.flag = !this.flag;
                }
            }
        });
    </script>

執行結果：

點選切換按鈕：

由於給輸入框設定了key的值，因此輸入的內容不會複用：即再賬號登陸介面輸入的賬號資訊，再點選切換時，輸入框內不會保留之前輸入的值。這裡涉及到虛擬DOM的知識點：

在vue中，由於存在虛擬DOM這一概念，當頁面顯示使用者賬號登陸的div時，在虛擬DOM中就已經對介面進行了渲染，當點選切換登入按鈕時，虛擬DOM並不會立即重新建立一個div進行渲染，而是檢視在虛擬DOM中是否有可複用的現成的已經渲染好的標籤，在上述程式碼中，由於input輸入框是兩個div共有的，按鈕也是兩個div共有的，因此在虛擬DOM中不會重新建立input輸入框，而是對使用者賬號登入中的虛擬DOM進行了複用，在不加key的情況下，input輸入框兩者用的其實是同一個（所以不加key在上一個介面輸入的值，點選切換時還會保留），若想區分開兩者間的input輸入框，需要為其加上一個key屬性以此來區別。