vue でオブジェクトを v-model にバインドする方法

v-model を使用して Vue でオブジェクトをバインドする場合、v-model をオブジェクト プロパティ、つまり にバインドする必要があります。データが更新されると、オブジェクトのプロパティと Vue インスタンス データが双方向で自動的に更新されます。

v-model を使用して Vue でオブジェクトをバインドする

Vue.js の v-model ディレクティブが利用可能ですHTML 要素と Vue インスタンス データ間の双方向データ バインディングを作成するために使用されます。ただし、v-model は通常、文字列や数値などの単純なデータ型をバインドするために使用されます。

オブジェクトを v-model にバインドする

オブジェクトを v-model にバインドするには、次のメソッドを使用できます:

<code class="html"><input v-model="object.property"></code>

Where:

• object は、バインドされるオブジェクトを含む Vue インスタンス プロパティです。
• property はオブジェクト内のプロパティであり、データ バインディングに使用されます。

オブジェクト プロパティの更新

フォーム要素を入力または変更すると、object.property への変更はすべて Vue に自動的に反映されます。この例ではその逆です。

例

次の例は、オブジェクトの name プロパティを入力ボックスにバインドする方法を示しています。ユーザーが新しい値を入力すると、それに応じて

user.name

プロパティが更新され、その逆も同様です。

以上がvue でオブジェクトを v-model にバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。