web-dev-qa-db-ja.com

Vue.js - v-modelとv-bindの違い

私はオンラインコースで勉強しています、そしてインストラクターは私にデフォルト値で入力テキストを作る運動を与えました。私はv-modelを使ってそれを完成させました、しかし、講師はv-bind：valueを選びました、そして、なぜかわかりません。

誰かがこれら二つの違いとそれがそれぞれをよりよく使うときの違いについて私に簡単な説明を与えることができますか？

javascriptmvvmframeworksvue.jsfrontend
126
Gustavo Dias

Fromhere-覚えておいてください：

<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はフォーム入力の双方向バインディングです。 v-bindを組み合わせてjs値をマークアップに追加し、v-on:input tojs値を更新.

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

v-modelすべての基本的なHTML入力タイプで動作します （テキスト、テキストエリア、番号、ラジオ、チェックボックス、選択）。モデルが日付をISO文字列（yyyy-mm-dd）として保存している場合、v-modelをinput type=dateとともに使用できます。モデルで日付オブジェクトを使用する場合（操作または書式設定を行うとすぐに良い考えです）、 do this 。

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

v-modelには修飾子.lazy、.trim、.numberもあり、 ドキュメント で説明されています。

309
bbsimonbb

簡単に言うと、v-modelは双方向バインディングを意味します。入力値を変更すると、バインドされたデータが変更され、逆の場合も同様です。

しかし、v-bind:valueは一方向バインディングと呼ばれます。つまり、バインドデータを変更することで入力値を変更できますが、入力データを変更してバインドデータを変更することはできません。要素.

この簡単な例をチェックしてください。 https://jsfiddle.net/gs0kphvc/

21
Madmadi

v-model
これは双方向のデータバインディングです。入力値を変更するとHTML入力要素をバインドするために使用され、バインドされたデータが変更されます。

v-modelはHTML入力要素にのみ使用されます

ex: <input type="text" v-model="name" >

v-bind
これは一方向のデータバインディングです。つまり、データを入力要素にのみバインドできますが、入力データを変更する境界データを変更することはできません。 v-bindはhtml属性をバインドするために使用されます
例：
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>
2
Prashant Gurav

v-modelを使用したくない場合があります。 2つの入力があり、それぞれが相互に依存している場合、循環参照の問題が発生する可能性があります。一般的な使用例は、会計計算機を構築する場合です。

これらの場合、ウォッチャーまたは計算されたプロパティを使用することはお勧めできません。

代わりに、v-modelを取得し、上記の回答が示すように分割します

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

実際には、この方法でロジックを分離する場合、おそらくメソッドを呼び出すことになります。

これは、実際のシナリオでは次のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>
0
Vincent Tang