HTMLのv-modelとは？

—

by

ai
in
日々の備忘録 > web > HTMLのv-modelとは？

v-modelとは

v-modelは、Vue.js が提供する双方向データバインディングディレクティブです。HTML の入力要素（<input>、<textarea>、<select> など）と Vue インスタンスのデータプロパティを結び付け、ユーザーが入力した値を自動的にデータに反映し、逆にデータが変化すれば UI に即座に反映させます。

主な特徴

  • 双方向バインディングにより、コード量が大幅に削減されます。
  • 入力要素の type に応じて内部で適切なイベントやプロパティを処理します。
  • カスタムコンポーネントでも modelValue と @update:modelValue を実装すれば v-model を利用できます。

基本的な使い方

Vue コンポーネントの data にバインドしたいプロパティを定義し、テンプレート内の要素に v-model を付与します。

<template>
  <div>
    <input v-model="message" placeholder="メッセージを入力">
    <p>入力内容: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

ポイント解説

  • v-model の内部処理：テキスト系入力では input イベント、チェックボックスやラジオボタンでは change イベントを監視し、要素の value（又は checked）をデータに同期します。
  • 修飾子：v-model.lazy は change 時にだけ更新、v-model.number は数値に変換、v-model.trim は空白を除去します。
  • カスタムコンポーネントでの利用：modelValue プロップと @update:modelValue イベントを実装することで、親コンポーネントから v-model でデータを受け渡せます。

実践的な例：チェックボックスのリスト

複数選択可能なチェックボックスを配列にバインドする例です。

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input type="checkbox" :value="item.id" v-model="selected"> {{ item.name }}
    </label>
    <p>選択された ID: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ],
      selected: []
    }
  }
}
</script>

まとめ

v-model は Vue.js のコア機能であり、HTML の入力要素とデータモデルをシームレスに結び付けることで、開発効率とコードの可読性を向上させます。修飾子やカスタムコンポーネント対応を活用すれば、さまざまな UI パターンに柔軟に対応可能です。

Views: 4