实例
在Vue中创建一个表单收集页面，可以使用v-model来实现双向数据绑定，以便收集和处理用户输入的数据。以下是一个简单的示例，包含文本输入、选择框和单选按钮的表单页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Form Collection Page</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select,
.form-group button {
width: 100%;
padding: 10px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="app">
<h1>表单收集页面</h1>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" v-model="formData.name" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" v-model="formData.email" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select id="gender" v-model="formData.gender">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group">
<label>爱好</label>
<label><input type="checkbox" value="reading" v-model="formData.hobbies"> 阅读</label>
<label><input type="checkbox" value="sports" v-model="formData.hobbies"> 运动</label>
<label><input type="checkbox" value="music" v-model="formData.hobbies"> 音乐</label>
</div>
<div class="form-group">
<button type="submit">提交</button>
</div>
</form>
<div v-if="submitted">
<h2>提交的数据：</h2>
<p>姓名：{{ submitted.name }}</p>
<p>邮箱：{{ submitted.email }}</p>
<p>性别：{{ submitted.gender }}</p>
<p>爱好：{{ submitted.hobbies.join(', ') }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
formData: {
name: '',
email: '',
gender: '',
hobbies: []
},
submitted: null
},
methods: {
submitForm() {
this.submitted = {...this.formData};
}
}
});
</script>
</body>
</html>在这个示例中，我们创建了一个包含姓名、邮箱、性别和爱好的表单。用户可以在表单中输入数据，并通过复选框选择多个爱好。当用户提交表单时，submitForm方法会被调用，将表单数据存储在submitted对象中，并显示提交的数据。
这个简单的示例展示了如何在Vue中创建一个表单收集页面。你可以根据需要扩展和修改这个示例，例如添加更多的输入字段、表单验证或使用Vue组件来构建更复杂的表单。
标签：vue,group,form,示例,submitted,表单,Vue,页面 From： https://blog.csdn.net/2301_76478257/article/details/136921910