Analisis arahan v-on dalam Vue: cara mengendalikan acara borang

Analisis arahan v-on dalam Vue: Cara mengendalikan acara borang, contoh kod khusus diperlukan

Dalam Vue, v- pada arahan Digunakan untuk mendengar peristiwa DOM dan melaksanakan kaedah yang sepadan apabila peristiwa itu dicetuskan. Melalui arahan v-on, kami boleh mengendalikan acara borang dengan mudah, seperti mengklik butang, menghantar borang, memasukkan kotak input, dll. Berikut akan memperkenalkan cara menggunakan arahan v-on untuk mengendalikan acara borang dan memberikan contoh kod khusus.

Pertama, mari kita lihat contoh mudah Katakan kita mempunyai butang dan kaedah perlu dilaksanakan selepas mengklik butang. Ini boleh dicapai dalam Vue:

Kod HTML:

<div id="app">
    <button v-on:click="handleClick">点击我</button>
</div>

Kod instance Vue:

new Vue({
    el: '#app',
    methods: {
        handleClick() {
            console.log('按钮被点击了！');
        }
    }
});

Dalam contoh di atas, melalui v-on The arahan mengikat acara klik pada kaedah handleClick. Apabila butang diklik, kaedah handleClick akan dipanggil dan mengeluarkan "Butang telah diklik!".

Selain klik acara, kami juga boleh menggunakan jenis acara lain, seperti keyup, hantar, dll. Seterusnya, saya akan menunjukkan kepada anda cara mengendalikan jenis acara borang lain dengan lebih banyak contoh kod.

1. Mengendalikan peristiwa input

Kod HTML:

<div id="app">
    <input v-on:input="handleInput">
    <p>{{ message }}</p>
</div>

Vue instance code: #🎜#rr 🎜#Dalam contoh di atas, kami mengikat peristiwa input kepada kaedah handleInput melalui arahan v-on. Apabila kandungan kotak input berubah, kaedah handleInput akan dipanggil dan kandungan input akan diberikan kepada mesej dalam atribut data.

Mengendalikan acara penyerahan

2. Kod HTML:

new Vue({
    el: '#app',
    data: {
        message: ''
    },
    methods: {
        handleInput(event) {
            this.message = event.target.value;
        }
    }
});

Kod instance Vue: #🎜 🎜#Dalam contoh di atas, kami mengikat acara hantar kepada kaedah handleSubmit melalui arahan v-on. Apabila borang diserahkan, kaedah handleSubmit dipanggil dan mengeluarkan nama pengguna dan kata laluan dalam kotak input. Gunakan kaedah event.preventDefault() untuk menghalang gelagat lalai penyerahan borang.

Melalui contoh di atas, kita dapat melihat pelbagai peristiwa bentuk boleh diproses dengan mudah melalui arahan v-on. Kita hanya perlu mengikat peristiwa dengan kaedah yang sepadan untuk melaksanakan logik yang sepadan.

Di atas adalah analisis bagaimana arahan v-on dalam Vue mengendalikan acara borang. Saya berharap pengenalan artikel ini dapat membantu semua orang memahami dan menggunakan arahan v-on.

Atas ialah kandungan terperinci Analisis arahan v-on dalam Vue: cara mengendalikan acara borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!