この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:T
更新日時:2026-05-15 05:24:41

タイトル: modelとdata フォーム入力値とDOMへの即時反映
SEOタイトル: 【Vue.js】modelとdata フォーム入力値とDOMへの即時反映

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<p><span style="color:#e74c3c"><strong>v-model</strong></span>ディレクティブを使用することで<strong>フォームの入力欄を作成してDOMと同期</strong>させることが出来ます。</p>

<p><span style="color:#e74c3c"><strong>data</strong></span>を使用することでhtml上の値を扱うことが出来るようになります。</p>

<p>&nbsp;</p>

<h2>実装例</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff"><span style="color:null">html</span></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><div id="app"></span></p>

			<p><span style="color:#ffffff">&nbsp; <form></span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; &nbsp; <input </span><span style="color:#f1c40f">v-model</span><span style="color:#ffffff">="</span><span style="color:#2ecc71">value</span><span style="color:#ffffff">"></span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; &nbsp; <p>value is: {{ </span><span style="color:#2ecc71">value </span><span style="color:#ffffff">}}</p></span></p>

			<p><span style="color:#ffffff">&nbsp; </form></span></p>

			<p><span style="color:#ffffff"></div></span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col" style="background-color:#ffffff">js</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">var app = new Vue({</span></p>

			<p><span style="color:#ffffff">&nbsp; el: '#app',</span></p>

			<p><span style="color:#ffffff">&nbsp; data: {</span></p>

			<p><span style="color:#ffffff">&nbsp; &nbsp; </span><span style="color:#f1c40f">value</span><span style="color:#ffffff">: 'init_value',</span></p>

			<p><span style="color:#ffffff">&nbsp; }</span></p>

			<p><span style="color:#ffffff">})</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

<h2>出力結果</h2>

<p><img src="https://jpn.itlibra.com/uploadImage/20190629223504_7065356.png" /></p>

<p>inputの値とpタグ内の値がリアルタイムで同期されます。</p>

<p>&nbsp;</p>