用vue写表单提交页面
时间: 2024-04-30 08:18:18 浏览: 5
好的,以下是一个简单的表单提交页面的 Vue 代码示例:
```html
<template>
<form @submit.prevent="submitForm">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" required>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="email" required>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: ''
};
},
methods: {
submitForm() {
// 提交表单
console.log(this.name, this.email);
}
}
};
</script>
```
在这个示例中,我们创建了一个包含姓名和邮箱输入框的表单。当用户点击提交按钮时,`submitForm` 方法会被调用,然后我们可以在控制台中看到表单数据的输出。你可以在 `submitForm` 方法中通过 AJAX 或其他方式来实现表单的提交,这取决于你的具体需求。