Mengenal Form pada Vue JS

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang Mengenal Form pada Vue JS. Dimana form ini berisi input text, textarea dan juga input radio button. Untuk mendapatkan nilai atau value dalam tag input html kita bisa menggunakan v-model yang ada pada Vue JS. Langsung saja teman-teman buat struktur html untuk dapat Mengenal Form pada Vue JS seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Form pada Vue JS</title>
    <style type="">
        #apps{
            background: salmon;
            color:gray;
            width: 800px;
            margin: auto;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
        

<div id="apps">    
            <!-- TEXTAREA -->
            <textarea v-model="textarea_pesan" cols="40" rows="10"></textarea>
            <p style="white-space: pre-line;">{{textarea_pesan}}</p>

            <!-- INPUT TEXT -->
            <input type="" name="" v-model="input_pesan">
            <p>{{input_pesan}}</p>

            <!-- RADIO BUTTON -->
            <input type="radio" name="" v-model="val_checkbox" value="laki-laki"> Laki-laki
            <input type="radio" name="" v-model="val_checkbox" value="perempuan"> Perempuan
            <p>{{val_checkbox}}</p>
        </div>

</body>

</html>

Khusus untuk textarea saya menggunakan style="white-space: pre-line;" pada tag p untuk membaca baris baru pada textarea.

Lalu teman-teman jangan lupa sisipkan link library dari Vue JS yang bisa kalian dapatkan di halaman resmi Vue JS dan berikut ini linknya

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Dan kemudian tahap terakhir dalam pembahasan Mengenal Form pada Vue JS yaitu teman-teman buat objek Vue seperti script di bawah ini.

<script type="">
            var app = new Vue({
                el: "#apps",
                data: {
                    textarea_pesan: '',
                    input_pesan: '',
                    val_checkbox: ''
                }
            })
        </script>

Jika teman-teman buka di halaman browser dan langsung melakukan input data maka akan secara langsung pula data akan tampil di bawahnya dalam tag p yang sudah di berikan kurung kurawel ganda sesuai nama variabel masing-masing. Seperti pada gambar di bawah ini.

Mengenal Form pada Vue JS

Mengenal Form pada Vue JS

Demikian artikel tentang  Mengenal Form pada Vue JS, semoga artikel ini dapat bermanfaat untuk teman-teman Dumet School. Dan buat kalian yang sedang mempelajari Vue JS silahkan bisa langsung di praktekannya dan explore lebih banyak mengenai form seperti select option, checkbox dan masih banyak lagi. Sampai jumpa di pembahasan selanjutnya dan selamat mencoba.

19 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat