Rumah > hujung hadapan web > View.js > teks badan

Arahan biasa dalam vue

下次还敢
Lepaskan: 2024-04-30 03:21:20
asal
829 orang telah melayarinya

Arahan Vue yang biasa digunakan termasuk: v-bind: Ikat ungkapan JavaScript kepada atribut elemen. v-on: Dengar dan kendalikan peristiwa pada elemen. v-model: melaksanakan pengikatan data dua hala. v-if: Membuat elemen berdasarkan syarat. v-for: Gelung melalui tatasusunan atau objek dan jadikan elemen untuk setiap nilai. v-else dan v-else-if: Sediakan pemaparan alternatif bagi cawangan bersyarat. v-sekali: Paparkan kandungan hanya apabila elemen dipaparkan buat kali pertama. v-pre: Halang Vue.js daripada menyusun kandungan elemen.

Arahan biasa dalam vue

Arahan Biasa dalam Vue

Arahan memainkan peranan penting dalam Vue.js, membolehkan kami menambah gelagat pada komponen Vue, mengubah suai data atau memanipulasi elemen.

v-bind: pengikatan diubah suai

Arahan ini digunakan untuk mengikat ungkapan JavaScript kepada atribut unsur. Ia boleh mengemas kini nilai atribut secara dinamik, contohnya:

<code class="html"><button v-bind:disabled="isBusy">Save Changes</button></code>
Salin selepas log masuk

v-on: Pengendalian acara

Arahan ini digunakan untuk mendengar dan mengendalikan acara pada elemen. Ia boleh mengikat pengendali acara kepada elemen, seperti:

<code class="html"><button v-on:click="saveChanges">Save Changes</button></code>
Salin selepas log masuk

v-model: Binding dua hala

Arahan ini digunakan untuk melaksanakan pengikatan data dua hala antara elemen input dan borang serta atribut data Vue. Ia membenarkan pengemaskinian data secara automatik, seperti:

<code class="html"><input v-model="username"></code>
Salin selepas log masuk

v-if: Rendering bersyarat

Arahan ini digunakan untuk memaparkan elemen secara bersyarat berdasarkan kebenaran atau kepalsuan ungkapan JavaScript. Ia boleh menunjukkan atau menyembunyikan elemen berdasarkan keadaan, contohnya:

<code class="html"><div v-if="isLoggedIn">Welcome</div></code>
Salin selepas log masuk

v-for: pemaparan gelung

Arahan ini digunakan untuk melelaran pada tatasusunan atau objek dan memaparkan elemen untuk setiap nilai. Ia boleh mencipta elemen secara dinamik, contohnya:

<code class="html"><ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul></code>
Salin selepas log masuk

v-else dan v-else-if: Rendering Alternatif

Arahan ini digunakan untuk menghasilkan elemen alternatif apabila keadaan v-if tidak berlaku. Mereka menyediakan cara untuk mengendalikan berbilang cawangan bersyarat, contohnya:

<code class="html"><div>
  <p v-if="isLoggedIn">Welcome</p>
  <p v-else-if="isGuest">Hello, guest</p>
  <p v-else>Please sign in</p>
</div></code>
Salin selepas log masuk

v-sekali: Render sekali

Arahan ini digunakan untuk memaparkan kandungan hanya apabila elemen dipaparkan buat kali pertama. Ia menghalang kandungan daripada dipaparkan beberapa kali apabila komponen dikemas kini, yang boleh meningkatkan prestasi, contohnya:

<code class="html"><div v-once>Static Content</div></code>
Salin selepas log masuk

v-pre: mencegah penyusunan

Arahan ini digunakan untuk menghalang Vue.js daripada menyusun kandungan sesuatu elemen, sebagai contoh:

<code class="html"><div v-pre>
  {{ name }}
</div></code>
Salin selepas log masuk

ini ialah arahan yang paling biasa digunakan dalam Vue, ia membolehkan kami membuat aplikasi interaktif dan dinamik.

Atas ialah kandungan terperinci Arahan biasa dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!