Vueはユーザーログイン切り替えを実装します

この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

切り替えには問題がある

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
    <div id="アプリ">
        <span v-if="isUser">
            <label for="username">ユーザーアカウント</label>
            <input type="text" id="ユーザー名" placeholder="ユーザーアカウント">
        </span>
        <span v-else>
            <label for="email">ユーザー メールボックス</label>
            <input type="text" id="email" placeholder="ユーザーのメールアドレス">
        </span>
        <button @click="isUser = !isUser">スイッチタイプ</button>
    </div>
    <script src="../js/vue.js"></script>
    <スクリプト>
        constアプリ = 新しいVue({
            el: '#app',
            データ： {
                ユーザー: true
            }
        })

    </スクリプト>
</本文>
</html>

エフェクト表示

問題

コンテンツを入力中にタイプを切り替えると、テキストには以前に入力したコンテンツが引き続き表示されます。
しかし、論理的に言えば、別の入力要素に切り替える必要があります。
他の入力要素には、何もコンテンツを入力しませんでした。

なぜこの問題が発生するのでしょうか?

これは、Vue がDOM をレンダリングするときに、パフォーマンス上の理由から、新しい要素を作成するのではなく、既存の要素を可能な限り再利用するためです。
上記の場合、Vue は元の入力要素が使用されなくなり、 else の入力として直接使用されていることを検出します。

解決

対応する入力にキーを追加する
キーが異なることを確認してください

完璧版ログイン例

入力に異なるキーを追加する

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
    <div id="アプリ">
        <span v-if="isUser">
            <label for="username">ユーザーアカウント</label>
            <input type="text" id="ユーザー名" placeholder="ユーザーアカウント" key="ユーザー名">
        </span>
        <span v-else>
            <label for="email">ユーザー メールボックス</label>
            <input type="text" id="email" placeholder="ユーザーのメールアドレス" key="email">
        </span>
        <button @click="isUser = !isUser">スイッチタイプ</button>
    </div>
    <script src="../js/vue.js"></script>
    <スクリプト>
        constアプリ = 新しいVue({
            el: '#app',
            データ： {
                ユーザー: true
            }
        })

    </スクリプト>
</本文>
</html>

エフェクト表示