タイトル: 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> </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"> <form></span></p>
<p><span style="color:#ffffff"> <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"> <p>value is: {{ </span><span style="color:#2ecc71">value </span><span style="color:#ffffff">}}</p></span></p>
<p><span style="color:#ffffff"> </form></span></p>
<p><span style="color:#ffffff"></div></span></p>
</td>
</tr>
</tbody>
</table>
<p> </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"> el: '#app',</span></p>
<p><span style="color:#ffffff"> data: {</span></p>
<p><span style="color:#ffffff"> </span><span style="color:#f1c40f">value</span><span style="color:#ffffff">: 'init_value',</span></p>
<p><span style="color:#ffffff"> }</span></p>
<p><span style="color:#ffffff">})</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>出力結果</h2>
<p><img src="https://jpn.itlibra.com/uploadImage/20190629223504_7065356.png" /></p>
<p>inputの値とpタグ内の値がリアルタイムで同期されます。</p>
<p> </p>