☰

Vue.js の v-model と v-bind の違いは何ですか? 質問する

tag-icon • tag-icon vue.js vue-directives
Vue.js の v-model と v-bind の違いは何ですか? 質問する

私はオンラインコースで Vue を学習しており、インストラクターからデフォルト値を持つ入力テキストを作成する演習が出されました。

私は を使用して完了しましたv-modelが、インストラクターは を選択しましたv-bind:value。その理由がわかりません。

これら 2 つの違いと、それぞれをいつ使用したほうがよいかについて、簡単に説明していただけますか?

ベストアンサー1

からここ- 覚えて：

<input v-model="something">

基本的には以下と同じです:

<input
    v-bind:value="something"
    v-on:input="something = $event.target.value"
>

または（省略構文）：

<input
    :value="something"
    @input="something = $event.target.value"
>

フォーム入力の双方向バインディングも同様v-modelです。これは、js 値をマークアップに取り込む と、js 値を更新するを組み合わせます。js 値は、 または に存在する必要があります。v-bindv-on:inputdatainject

v-modelできるときは使用してください。必要なときはv-bind/を使用してくださいv-on:-) あなたの回答が受け入れられたことを願っています。

v-model すべての基本的なHTML入力タイプで動作しますv-model(テキスト、テキストエリア、数値、ラジオボタン、チェックボックス、選択)。モデルが日付を ISO 文字列 (yyyy-mm-dd) として保存している場合は、これを使用できますinput type=date。モデルで日付オブジェクトを使用する場合 (日付オブジェクトを操作またはフォーマットする場合は、これを推奨します)、これを行う。

v-model知っておくとよい、いくつかの追加のスマート機能があります。 IME (多くのモバイル キーボード、または中国語/日本語/韓国語) を使用している場合、単語が完了するまで (スペースが入力されるか、ユーザーがフィールドを離れるまで)、v-model は更新されません。 は、v-inputより頻繁に実行されます。

v-model.lazy、、、には修飾語も含まれており.trim、.numberドク。

おすすめ記事