用vue写一个个人信息收集表
时间: 2024-09-13 22:12:02 浏览: 30
要使用Vue.js创建一个简单的个人信息收集表,首先需要设置HTML结构、Vue实例以及数据模型。以下是一个基础示例:
1. HTML结构:
```html
<div id="personal-info-form">
<h2>个人资料填写表</h2>
<form @submit.prevent="submitForm">
<label for="firstName">姓名:</label>
<input type="text" v-model="firstName" required><br>
<label for="lastName">姓氏:</label>
<input type="text" v-model="lastName" required><br>
<label for="email">邮箱:</label>
<input type="email" v-model="email" required><br>
<label for="phone">电话:</label>
<input type="tel" v-model="phone" pattern="\d{10,15}" required><br>
<label for="address">地址:</label>
<input type="text" v-model="address"><br>
<button type="submit">提交</button>
</form>
<p v-if="successMessage">{{ successMessage }}</p>
</div>
```
2. JavaScript (Vue实例):
```javascript
<script>
import Vue from 'vue';
export default {
name: 'PersonalInfoForm',
data() {
return {
firstName: '',
lastName: '',
email: '',
phone: '',
address: '',
successMessage: '',
};
},
methods: {
submitForm() {
// 在这里添加验证逻辑
if (!this.firstName || !this.lastName || !this.email || !this.phone) {
alert('所有字段都必须填写');
return;
}
// 假设发送到服务器
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
phone: this.phone,
address: this.address
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
this.successMessage = '信息已成功提交';
} else {
console.error('提交失败:', data.message);
}
})
.catch(error => console.error('错误:', error));
this.firstName = '';
this.lastName = '';
this.email = '';
this.phone = '';
this.address = '';
},
},
};
</script>
```
这个例子创建了一个包含姓名、姓氏、邮箱、电话和地址字段的表单。用户提交表单后,数据会被发送到服务器(这里是模拟的)。实际项目中,请确保替换`fetch`调用来适应你的后端API。同时,可以添加更多验证逻辑和样式美化。