在 Vue.js 中建立表單的步驟
npm install -g @vue/cli vue create my-form-app cd my-form-app npm run serve
<template> <div> <h1>Simple Form</h1> <form @submit.prevent="handleSubmit"> <div> <label for="name">Name:</label> <input type="text" id="name" v-model="form.name" required /> </div> <div> <label for="email">Email:</label> <input type="email" id="email" v-model="form.email" required /> </div> <button type="submit">Submit</button> </form> <p v-if="submitted">Form has been submitted!</p> </div> </template> <script> export default { data() { return { form: { name: '', email: '' }, submitted: false }; }, methods: { handleSubmit() { console.log('Submitted data:', this.form); this.submitted = true; // Reset form this.form.name = ''; this.form.email = ''; } } }; </script>
<template> <div id="app"> <MyForm /> </div> </template> <script> import MyForm from './components/MyForm.vue'; export default { components: { MyForm } }; </script>
npm run serve
Vue.js 是在 Web 應用程式中開發表單和管理事件監聽器的絕佳選擇。
使用 Vue.js,您可以輕鬆建立互動式和響應式表單。您可以根據應用程式需求新增驗證、狀態管理和其他功能來進一步增強此表單。
編碼愉快! ! !
以上是適合初學者的 Vue.js VueJs 部分錶單和事件監聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章!