非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2019/01/07

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

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

広告

完成形

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

ソースコード

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

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>
 

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Vue.js