Apakah perbezaan antara v-bind dan v-model dalam vue

Perbezaan: 1. "v-bind" ialah pengikatan sehala, manakala "v-model" ialah pengikatan dua hala; 2. "v-bind" hanya boleh menyegerakkan data dalam vue ke halaman. Dan "v-model" bukan sahaja boleh menyegerakkan data dalam vue ke halaman, tetapi juga menetapkan data pengguna kepada atribut dalam vue.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Perbezaan antara v-model dan v-bind:

1 v-bind ialah ikatan sehala, digunakan untuk mengikat data dan Sifat dan ungkapan hanya boleh menyegerakkan data dalam Vue ke halaman.

2. Model v ialah pengikatan dua hala Ia bukan sahaja boleh menyegerakkan data dalam vue ke halaman, tetapi juga menetapkan data pengguna kepada atribut dalam vue.

3. v-bind boleh menetapkan nilai kepada mana-mana atribut, manakala v-model hanya boleh melakukan pengikatan data dua hala untuk elemen dengan atribut nilai.

1. v-model

v-model kebanyakannya digunakan dalam bentuk Ia mencipta pengikatan dua hala pada elemen bentuk dan memilih kaedah yang betul untuk mengemas kini elemen mengikut jenis kawalan boleh mengikat teks, radio, kotak semak, dipilih

1. Mengikat teks

<input type="text" v-model="val" />
<p> {{val}} </p>

2 perubahan radioval dengan Nilai butang radio yang dipilih akan menjadi satu atau dua

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

3 Kotak semak Ikat

(1) Kotak semak tunggal, nilai akhir adalah logik. nilai benar dan salah

(2) Apabila terdapat berbilang kotak semak, ikat nilai pada tatasusunan

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

Nilai dalam checkArray akan berubah berdasarkan sama ada ia dipilih

<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>

4. Ikat pilih

(1) Ikat pada satu pilihan (2) Apabila mengikat berbilang pilihan, perkara yang sama digunakan untuk tatasusunan

5. Tambah parameter

(1) malas

Tukar peristiwa input kotak input kepada peristiwa perubahan, supaya kotak input dikemas kini dalam acara tukar dan bukannya input

Mengenai perbezaan antara peristiwa perubahan dan peristiwa input, ringkaskan:

Acara perubahan mesti dicetuskan selepas kotak input hilang fokus, manakala acara input boleh dipantau dalam masa nyata.

(2)nombor

Tukar nilai yang dimasukkan dalam kotak teks kepada nombor Jika ia ditukar kepada nombor diikuti dengan NAN, kembalikan nilai asal

(3) pangkas

Alih keluar ruang hadapan dan belakang rentetan input

2 v-bind

---

1

Gunakan v-bind secara langsung atau {{}}

2. 3. Ungkapan Bind

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

4. Bind html

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

Pada masa ini, anda mesti menggunakan tiga {}

Lagi Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:

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

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Apakah perbezaan antara v-bind dan v-model dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!