Vue双方向バインディングの詳細な説明

1. 双方向バインディング

双方向バインディングとは、フロントエンドデータが変更されると、データ内のデータも変更されることを意味します。同様に、データ内のデータが変更されると、フロントエンドページのデータも変更されます。さらに、このプロセスでは更新は必要ありません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
    <!-- 入力した内容が表示されます。実際には、フロントエンドのデータが変更され、それに応じてメッセージも変更されます -->
    入力テキスト: <input type="text" v-model="message">{{message}}
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            メッセージ： ""
        }
    });
</スクリプト>
 </本文>
</html>

実行結果:

data 内のデータが変更されると、以下に示すように、フロントエンドページのデータも変更されます。

ここに画像の説明を挿入

フロントエンドのデータが変更されると、データ内のデータも変更されます。

以下のように表示されます。

ここに画像の説明を挿入

2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん「はい」です。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
    性別：
    <input type="radio" name="sex" value="Male" v-model="message"> 男性<input type="radio" name="sex" value="Female" v-model="message"> 女性<p>あなたの性別は: {{message}}</p>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            メッセージ： ""
        }
    });
</スクリプト>
 </本文>
</html>

実行結果:

ここに画像の説明を挿入

3. もう一つ見てみましょう:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
    <v-model を選択="選択">
        <option value="" disabled>--選択してください--</option>
        <option>男性</option>
        <option>女性</option>
    </選択>
    <span>あなたの選択: {{select}}</span>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#app",
        データ： {
            選択: ""
        }
    });
</スクリプト>
 </本文>
</html>

実行結果:

ここに画像の説明を挿入