Mengenal Form pada Vue JS

19/12/2019    Shelli Ripati    261     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More