Vue.jsでテキストボックスの入力と同期をとる方法

2019/01/06 2019/01/07

Vue.jsでデータをテキストボックスの入力と同期させる方法です。

やり方はいたって簡単で、HTML内の{{ }}で括られた変数を同じにするだけで可能になります。

[ad#top-1]

完成形

こちらが完成形です。見ての通りテキストボックスに入力した文字列が同期してくれています。

ソースコード

ソースコードは以下のとおりです。

Vue側では特別な処理をしているわけではなく、HTML側のテキストボックスとpタグ内で同じ「message」という変数を使っているだけに過ぎません。これで同期がとれます。

<!DOCTYPE html>
<html lang="jp">
<head>
<title>Vue Test #2</title>
</head>
<body>

<h1>Vue Test #2</h1>

<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: ''
    }
})
</script>

</body>
</html>

[ad#ad-1]

- Vue.js