双方向データバインディング

双方向データバインディング(v-model)


Vue.jsでは 双方向データバインディング という考えが重要になります。

<双方向データバインディング>
JavaScript側から値を設定すると、画面の表示が変わる 「データ」➡︎ 「画面」 という形は今まで触れてきた内容です。
それとは逆に、
画面側の入力からJavaScriptのデータ、つまり 「画面」➡︎ 「データ」 という方向からも値を変更することができます。

具体例


実は、この双方向データバインディングの内容は 1.Vue.jsを書く準備 で既に行っています。
inputタグに入力した内容がリアルタイムで画面上に表示されるというのを実装しましたね。

簡略化のために1つのファイルに書いてあります。

<!DOCTYPE html>
<html lang="ja"">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue.js'
            }
        });
    </script>
</body>
</html>

検証ツールを開いておくと、データの方も入力に合わせて文字が変化しているのがわかります。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami