VueJS

Belajar Vue Js Bagian 8 : Form Input Binding

Hallo Coder 😃 , Pada tutorial sebelumnya kita sudah membahas Membuat List di Vue Js , dan pada kali ini kita akan membahas Form input binding di vue js.

Didalam form html terdapat beberapa type yaitu : Text, Textarea, Radio, Checkbox, Select dan lainya. fungsi dari type tersebut berbeda beda.

Didalam input biding nanti kita akan memakai v-model dengan two way data binding. yang artinya jika kita menginputkan sesuatu maka akan ada data yang ikut terinput atau terubah.

Form input binding di vue js

#Text

Dalam code diatas kita melihat v-model untuk sebagai identitas dari input tersebut. jika kita ketikan sesuatu maka pada hasilpun akan ikut muncul sesuai yang kita ketikan

Hasilnya :

Hasilnya: {{ messageText }}

#TextArea

Hasilnya :

Hasilnya :
{{ messageTextarea }}


Didalam textarea kita bisa gunakan enter.

#Checkbox

Hasilnya :

Didalam checkbox juga kita bisa membuatnya dengan banyak checkbox, contohnya seperti ini

Hasilnya :


Checked names: {{ checkedNames }}

#Radio

Hasilnya :



Picked: {{ picked }}

#Select

Hasilnya :

Hasilnya: {{ selected }}

Kamu juga bisa coba Multiple Select seperti ini

Hasilnya :

Hasilnya: {{ selected }}

Itulah materi dari tutorial Input Binding di vue js indah bukan 💕, selebihnya tinggal kamu kreasikan dan pake sesuai kebutuhan kamu. semoga dapat membantu, sampai ketemu di tutorial selanjutnya, Salam Coder 😃

www.domainesia.com