Vue3 v-model ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-modelディレクティブは、フォーム入力要素とコンポーネント上に双方向データバインディングを作成するために使用されます。

基本説明

v-modelディレクティブはフォーム要素とコンポーネント上に双方向データバインディングを作成します。コントロールの種類に応じて、要素を更新する正しい方法を自動的に選択します。

  • 期待される型: フォーム要素の種類によって異なります
  • 機能: フォーム入力要素とコンポーネント上に双方向データバインディングを作成します。

基本的な使い方

1、テキスト入力

例

<template>
  <div>
    <input v-model="message" placeholder="入力内容" />
    <p>入力した内容: {{ message }}</p>
  </div>
</template>

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

2、チェックボックス

例

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agreed" />
    <label for="agree">利用規約に同意します</label>
    <p>同意済み: {{ agreed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { agreed: false }
  }
}
</script>

修飾子

  • .lazy: change イベント後に同期（input ではなく）
  • .number: 自動的に数値に変換
  • .trim: 前後の空白を自動的に削除

例

<input v-model.lazy="lazyInput" placeholder="フォーカス喪失時同期" />
<input v-model.number="age" type="number" placeholder="自動数値変換" />
<input v-model.trim="username" placeholder="空白を除去" />

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張