Vue.jsの v-model ディレクティブについて

Vue.jsの v-model ディレクティブは、フォーム要素とVue.jsのデータとの間で双方向のデータバインディングを提供します。つまり、フォーム要素の値が変更されると、Vue.jsのデータが更新され、逆にVue.jsのデータが変更されるとフォーム要素の値も更新されるという動作を実現します。

テキスト入力の場合:

<div id="app">
  <input type="text" v-model="message">
  <p>入力されたテキスト: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

上記の例では、<input> 要素に v-model ディレクティブを使用しています。これにより、入力されたテキストが message データプロパティにバインドされます。message データプロパティは、Vue.jsのデータとして定義されており、入力されたテキストが変更されると自動的に更新されます。そして、<p> 要素内で {{ message }} を使用して message の値を表示しています。

チェックボックスの場合:

<div id="app">
  <input type="checkbox" v-model="checked">
  <label>チェックされたかどうか: {{ checked }}</label>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked: false
  }
});
</script>

上記の例では、<input> 要素がチェックボックスとして使用されています。v-model ディレクティブを使用して、チェックされたかどうかを checked データプロパティにバインドしています。checked データプロパティが変更されると、チェックボックスの状態も自動的に更新されます。

v-model ディレクティブを使用することで、フォーム要素とVue.jsのデータの間で双方向のデータバインディングを簡単に実現することができます。これにより、フォームの操作とVue.jsのデータの同期がスムーズに行われ、ユーザーインターフェースの開発を効率化することができます。