Membuat Contoh Data Binding Pada VueJS

Pada artikel sebelumnya kita sudah mengenal contoh data binding pada Vue JS. Tentunya mungkin kurang menarik jika teman teman hanya membuat hal seperti berikut. Mari kita buat sebuah contoh sederhana dengan membuat form dan membuat previewnya dengan mengunakan bootstrap sebagai design layoutnya. Caranya teman teman buat struktur formnya sebagai berikut

dimana masing masing inputannya saya berikan v-model dengan nama yang berbeda beda yang nantinya bakal kita tampilkan data binding tersebut. dan satu lagi kita akan buat sebuah tombol submit seperti berikut

kita cek tampilannya akan seperti berikut

selanjutnya kita akan buat previewnya yang akan menampilkan v-model yang telah kita definisikan sebelumnya

maka jika kita jalankan dan kita isi inputannya satu persatu maka akan tampil secara otomatis apa yang kita ketikkan pada inputan textnya

itu dia contoh dalam menerapkan data binding pada VueJS. nanti kita akan lanjutkan pada artikel berikutnya terima kasih.