Pada pelajaran ketiga, kita akan berbicara tentang rendering kondisional. Cara menampilkan sesuatu di halaman hanya jika beberapa kondisi terpenuhi.
→ Vue.js untuk Pemula Pelajaran 1: Contoh Vue
→ Vue.js untuk Pemula, Pelajaran 2: Pengikatan Atribut
→ Vue.js untuk Pemula, Pelajaran 3: Rendering Bersyarat
→ Vue.js untuk Pemula, Pelajaran 4: Daftar Rendering
→ Vue .js untuk pemula pelajaran 5: pemrosesan acara
→ Pelajaran pemula Vue.js 6: mengikat kelas dan gaya
→ Vue.js pemula pelajaran 7: properti terhitung
→ Pelajaran pemula Vue.js 8: komponen
Tujuan pelajaran
Kami membutuhkan tulisan di kartu produk yang memberi tahu pengunjung apakah produk tersebut tersedia atau tidak. Jika produk tersedia, sebuah prasasti harus ditampilkan
In Stock. Jika tidak tersedia - sebuah prasasti Out of Stock. Keputusan untuk menampilkan prasasti tertentu harus dibuat berdasarkan data yang disimpan dalam aplikasi.
Kode awal
Inilah kode yang akan kita mulai. Ini, seperti biasa, di dalam file
index.html, di tag <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
Di file tersebut
main.js, saat menyiapkan instance Vue, objek data berikut akan digunakan:
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
Perhatikan bahwa
dataproperti baru telah ditambahkan ke objek . Ini adalah properti inStockyang menyimpan nilai boolean true.
Tugas
Saat mengembangkan aplikasi web, elemen sering kali perlu ditampilkan di halaman tergantung pada pemenuhan kondisi tertentu. Misalnya, jika stok suatu barang habis, Anda perlu menginformasikannya di kartu barang.
Pesan terkait rencananya akan diterbitkan sebagai elemen
<p>. Ini berarti bahwa di suatu tempat index.htmlakan ada elemen-elemen berikut:
<p>In Stock</p>
<p>Out of Stock</p>
Tugas kita adalah menarik salah satunya jika barang dalam persediaan, dan yang lainnya dalam situasi ketika barang tidak tersedia.
Solusi dari masalah tersebut
Di Vue, solusi untuk masalah ini terlihat sederhana dan langsung.
Seperti yang sudah Anda ketahui, data yang menunjukkan ada atau tidaknya stok barang dijelaskan dalam
main.js, di objek data:
inStock: true
Untuk memberi tahu sistem elemen mana yang
<p>akan dirender, kita dapat menggunakan arahan v-ifdan v-else. Ini berarti bahwa index.htmlberikut ini akan termasuk:
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
Jika
inStockberisi nilai sebenarnya, item pertama dicetak <p>. Jika tidak, item kedua akan ditampilkan. Dalam kasus kami inStock, nilainya ditulis true, jadi itu akan ditampilkan In Stock.
Kami memiliki stok.
Hebat! Kami baru saja menggunakan rendering bersyarat untuk menampilkan detail produk. Kami telah memecahkan masalah tersebut. Tapi jangan berhenti di situ dan lanjutkan eksplorasi kita tentang rendering bersyarat.
V-else-if direktif
Mekanisme kami untuk rendering bersyarat berdasarkan pedoman
v-ifdan v-elsedapat diperluas dengan menambahkan level logika lain. Ini bisa dilakukan dengan menggunakan direktif v-else-if. Untuk mendemonstrasikan ini, mari kita memperumit contoh kita sedikit.
Misalkan benda
data, dalam main.js, memiliki informasi tentang jumlah barang. Mereka disimpan di properti inventory:
inventory: 100
Dengan menganalisis properti ini menggunakan ekspresi JavaScript yang diapit oleh tanda kutip, kami dapat memberikan informasi produk yang lebih akurat kepada pengunjung halaman:
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
Dalam situasi ini, elemen pertama akan ditampilkan di halaman
<p>, karena ekspresi terkait ternyata benar.
Arahan V-show
Jika elemen laman perlu disembunyikan dan sering ditampilkan, itu berarti masuk akal untuk melihat arahan untuk menerapkan mekanisme ini
v-show. Elemen dengan arahan seperti itu akan selalu ada di DOM, tetapi akan terlihat hanya jika kondisi yang diteruskan ke arahan ternyata benar. Faktanya, kita berbicara tentang fakta bahwa, berkat penggunaan arahan ini, properti CSS akan diterapkan ke elemen, berdasarkan kondisi display: none.
Metode ini lebih efisien daripada mengelola item menggunakan
v-ifdan v-else.
Penerapan arahan ini terlihat seperti ini:
<p v-show="inStock">In Stock</p>
Solusi untuk masalah kami, di mana arahan
v-ifdan digunakan v-else, cocok untuk kami. Karena itu, kami akan fokus padanya dan tidak akan mengubah apapun.
Bengkel
Tambahkan properti ke objek data
onSale. Ini harus digunakan untuk mengontrol rendering elemen <span>yang menampilkan teks On Saledan menginformasikan pengunjung tentang penjualan.
Berikut adalah template yang dapat Anda gunakan untuk mengatasi masalah ini.
Inilah solusi untuk masalah tersebut.
Hasil
Hari ini Anda belajar tentang rendering bersyarat menggunakan Vue. Yakni, tentang hal berikut:
- Ada arahan Vue yang memungkinkan Anda merender elemen secara bersyarat:
- v-jika
- v-else-if
- v-lain
- v-show
- Saat bekerja dengan direktif, Anda dapat menggunakan ekspresi JavaScript yang diteruskan kepada mereka dalam tanda kutip.
- Jika ekspresi yang diteruskan ke direktif dalam tanda kutip benar, item tersebut adalah keluaran.
- Direktif
v-showhanya memengaruhi visibilitas elemen, tidak memasukkan elemen ke DOM dan tidak menghapus elemen dari DOM.
Apakah Anda memiliki masalah yang Anda, setelah mulai berkenalan dengan Vue, sudah berencana untuk menyelesaikannya dengan bantuan framework ini?
→ Vue.js pemula pelajaran 1: contoh Vue
→ Vue.js untuk pemula, pelajaran 2: mengikat atribut
→ Vue.js pemula pelajaran 3: rendering bersyarat
→ Vue.js pemula pelajaran 4: daftar rendering
→ Vue .js untuk pemula pelajaran 5: pemrosesan acara
→ Pelajaran pemula Vue.js 6: mengikat kelas dan gaya
→ Vue.js pemula pelajaran 7: properti terhitung
→ Pelajaran pemula Vue.js 8: komponen
