v-if
directive yang digunakan untuk merender atau tidak merender suatu elemen DOM (conditional rendering)
buatlah sebuah file baru dengan nama directive.html dan tuliskan codenya seperti berikut
jika selesai coba jalankan pada brosernya maka akan muncul tampilan berikut.
hasil diatas kenapa keluar angka "B" karena nilai nya lebih dari 70 perhatihan pada gambar sebelumnya pada line 17, jika kita rubah nilai nya dengan angaka lain seperti dibawah ini
dari gambar diata apabila nilainya 67 karena ketentuannya jika dibwah 50 maka hasilnya seperti dibawah ini
v-on
Directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue. Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue.
kita akan mencoba event v-on, ada banyak seklai event-event di dalam vue.js ini, kali ini kita hanya mencoba event onclick.
Buat file .html baru dan masukan kode berikut:
Dan coba buka di browser dan hasilnya sebagai berikut:
Klik tombol tambah maka nilai pada gambar berikut akan bertambah 1
Jika kita Klik button seperti pada gambar, maka responnya seperti berikut
Selanjutnya klik link seperti pada gambar maka akan redirect ke link tersebut, disni akan link ke Google
List Collection
Selanjutnya membuat data list collection dengan design sederhana seperti menu pada Eleectronic Shopp yang sudah di bantu dengan boostrap.
Buat file .html dan masukan kode berikut:
kemudian kita tambahkan gambar yang kita perlukan, seperti gambar betrikut
ketika dijalankan pada browser maka hasilnya seperti berikut
selesai!!!
No comments:
Post a Comment