Vueの双方向バインディングシステムは、Webアプリケーションの開発で最も難しい部分の1つであるユーザー入力の同期を取り、v-modelを使用して非常にシンプルにします。 v-modelディレクティブは、モデルが変更されるたびにテンプレートを更新し、テンプレートが変更されるたびにデータモデルを更新します。

双方向バインディングは強力な機能であり、適切に使用すると、開発プロセスを大幅にスピードアップできます。 これにより、ユーザー入力をアプリケーションデータモデルと一貫性のある状態に保つ複雑さが軽減されます。

Vueでは、双方向バインディングはv-modelディレクティブを使用して実行されます。

テキスト入力要素へのバインド

input要素の値をコンポーネントのデータのプロパティにバインドするには、v-model="dataProperty"を次のように使用します。

コンポーネントのデータメソッドは次のとおりです。

data() {
  return {
    existentialQuestion: 'Am I truly an alligator?'  
  };
}

そしてテンプレート:

<h2>My deepest, darkest question: {{existentialQuestion}}</h2>
<input v-model="existentialQuestion"/>

これがライブデモです:[codepen alligatorio poyLjqY]

入力値はAm I truly an alligator?で始まりますが、入力を変更すると、 examplesQuestion プロパティ(およびh2要素)がリアルタイムで更新されることに注意してください。

チェックボックスとラジオボタンへのバインド

チェックボックスとラジオボタンは、入力要素とほとんど同じように機能します。 チェックボックスのバインドはtrueまたはfalseのいずれかになり、ラジオボタンのバインドはvalueプロパティの内容に関係なく行われます。

さらに、チェックボックスのセットを単一の配列にバインドできます。これにより、チェックされている場合、valueプロパティの内容が配列に配置されます。

単一のチェックボックスの例

コンポーネントデータ…

data() {
  return {
    statementIsTrue: true  
  };
}

…そしてテンプレート

<p>You have decided this statement is {{statementIsTrue}}</p>
<label>
  <input type="checkbox" v-model="statementIsTrue"/>
  Is this statement true?
</label>

…そしてライブで試してみてください:[codepen alligatorio abNYvxd]

複数のチェックボックスの例

コンポーネントデータ…

data() {
  return {
    namesThatRhyme: []  
  };
}

…そしてテンプレート

<p>A list of names that rhyme: {{namesThatRhyme.join(', ')}}</p>
<label>
  <input type="checkbox" value="Daniel" v-model="namesThatRhyme"/>
  Daniel
</label>
<label>
  <input type="checkbox" value="Nathaniel" v-model="namesThatRhyme"/>
  Nathaniel
</label>
<label>
  <input type="checkbox" value="Hubert" v-model="namesThatRhyme"/>
  Hubert
</label>

…そしてデモ:[codepen alligatorio NWNYGZE]

ラジオボタンの例

コンポーネントデータ…

  data() {
    return {
      howAreYouFeeling: "great"
    };
  }

…そしてテンプレート

<p>How are you feeling today?</p>
  <label>
    <input type="radio" value="great" v-model="howAreYouFeeling" />
    great
  </label>
  <label>
    <input type="radio" value="wonderful" v-model="howAreYouFeeling" />
    wonderful
  </label>
  <label>
    <input type="radio" value="fantastic" v-model="howAreYouFeeling" />
    fantastic
  </label>
  <p>I am also feeling <em>{{howAreYouFeeling}}</em> today.</p>

これがデモです:[codepen alligatorio gOreaVe]

ノート

  • デフォルトでは、v-modelは input イベントが発生するたびに評価されます(つまり、 キーを押すか貼り付けます。)ユーザーが入力を終了してフィールドのフォーカスを外すまで待つ場合は、 v-model.lazy 修飾子を使用して、v-modelにをリッスンさせることができます。代わりにchangeイベント。
  • ユーザー入力を文字列ではなく数値にキャストする場合は、v-model.number修飾子を追加します。 他のタイプへのキャストは自分で処理する必要があります。
  • v-model.trim 修飾子は、バインドされた文字列から空白を削除し、先頭または末尾に空白を削除します。 これは(明らかに)v-model.numberと組み合わせて使用することはできません。
  • v-model =“ dataProperty” は一見魔法のように見えますが、実際には:value="dataProperty" @input="dataProperty = $event.target.value"の省略形です。 そのため、独自のコンポーネントのvモデルサポートを簡単に実装できます。