Vue.jsでの双方向バインディングにv-modelを使用する
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モデルサポートを簡単に実装できます。