Vue.jsでの双方向バインディングにv-modelを使用する
Vueの双方向バインディングシステムは、Webアプリケーションの開発で最も難しい部分の1つであるユーザー入力の同期を取り、v-modelを使用して非常にシンプルにします。 v-modelディレクティブは、モデルが変更されるたびにテンプレートを更新し、テンプレートが変更されるたびにデータモデルを更新します。
双方向バインディングは強力な機能であり、適切に使用すると、開発プロセスを大幅にスピードアップできます。 これにより、ユーザー入力をアプリケーションデータモデルと一貫性のある状態に保つ複雑さが軽減されます。
Vueでは、双方向バインディングはv-modelディレクティブを使用して実行されます。
テキスト入力要素へのバインド
入力要素の値をコンポーネントのデータのプロパティにバインドするには、次を使用します。 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モデルサポートを簡単に実装できます。