【Vue.js】双方向データバインディング(v-model)

Vue.js

2018.07.222024.07.04

Javascript用フレームワーク「Vue.js」で双方向データバインディング(v-model)する方法をソースコード付きでまとめました。

目次

双方向データバインディング(v-model)
サンプルコード
関連ページ

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

Javascript用フレームワーク「Vue.js」では、v-model属性で双方向データバインディングができます。
主に「input」「select」「textarea」タグに対して使用し、Vueオブジェクトのデータと、フォーム部品の値を関係づけます。

書式

<input v-model="treasure" type="text">
    <div>宝具：{{ treasure }}</div>
</div>

また、「v-model」は、「v-model.number」のように修飾子をつけて設定変更できます。

修飾子	説明
.lazy	inputでなくchangeイベントを監視
.number	データを数値に変換
.trim	データをトリム(前後の空白を除去)

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>

</head>
<body>

<div id="app">
    <input v-model="treasure" type="text">
    <div>宝具：{{ treasure }}</div>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

./js/main.js

var app = new Vue({
    el: '#app',
    data: { treasure: 'Excalibur' }
});

入力フォームの文字列が反映されて下のdivタグ内に表示されます。

関連ページ

【Vue.js入門】使い方・サンプル集

Vue.jsの使い方を入門者向けにサンプルコード付きでまとめました。

【TypeScript入門】使い方まとめ

TypeScriptの基礎文法、使い方について入門者向けにまとめました。

WEB開発入門速報 |

コメント