vueのv-bindとv-modelの違いは何ですか

違い: 1. 「v-bind」は一方向バインディングですが、「v-model」は双方向バインディングです; 2. 「v-bind」は vue 内のデータのみを同期できます。また、「v-model」は、vue のデータをページに同期するだけでなく、vue の属性にユーザー データを割り当てることもできます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

v-model と v-bind の違い:

1. v-bind は一方向のバインディングであり、バインドに使用されます。データとプロパティと式は、vue 内のデータをページにのみ同期できます。

2. v-model は双方向バインディングであり、vue のデータをページに同期できるだけでなく、ユーザー データを vue の属性に割り当てることもできます。

3. v-bind は任意の属性に値を割り当てることができますが、v-model は value 属性を持つ要素に対してのみ双方向のデータ バインディングを実行できます。

1. v-model

v-model は主にフォームで使用され、フォーム要素に双方向のバインディングを作成し、コントロールの種類に応じて要素を更新する正しい方法を選択します。テキスト、ラジオ、チェックボックス、選択済み

1. テキストをバインド

e943de7f41fde7c6082e672342ce5b5a
e388a4556c0f65e1904146cc1a846bee {{val}} 94b3e26ee717c64999d7867364b1b4a3

2. radio

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

radioval値をラジオボタンとしてバインドできます。が選択されている 値は 1 または 2 になります

3. Bind checkBox

(1) 単一のチェック ボックス、最終値は論理値 true と false

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

(2) チェック ボックスが複数ある場合は、値を配列にバインドします

<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

checkArray の値は、選択されているかどうかに応じて関連して変化します

# 4. select のバインド

(1) 単一の select

にバインドします。(2) 複数の select をバインドする場合、配列

5 にも同じことが当てはまります。パラメータの追加

(1) Lazy

入力ボックスの入力イベントを変更イベントに変更し、入力ボックスが入力ではなく変更イベントで更新されるようにします

変更について イベントと入力イベントの違いを簡単に言うと、

変更イベントは入力ボックスがフォーカスを失った後にトリガーする必要がありますが、入力イベントはリアルタイムで監視できます。

(2)数値

テキストボックスに入力した値を数値に変更します。数値にNANが続く場合は、元の値を返します

(3)trim

入力文字列の先頭と末尾のスペースを取得

---

2. v-bind

1.バインドテキスト

v-bind を直接使用するか、{

{}}

<p v-bind="message"></p>
<p>{{message}}</p>

2. バインド属性

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

3. バインド式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

4. html

<div>{{{ raw_html }}}</div>

現時点では、3 つのバインドを使用する必要があります。{}

プログラミング関連の知識については、

プログラミングビデオにアクセスしてください。 ！

以上がvueのv-bindとv-modelの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。