uni-app编写一个含有姓名,班级,学号,座号,性别,爱好,年龄,并有提交功能,保留选项的个人信息表
时间: 2024-06-09 09:10:48 浏览: 13
首先,我们需要在uni-app中创建一个表单页面,包含姓名,班级,学号,座号,性别,爱好,年龄等表单项,以及一个提交按钮。
在页面中,我们可以使用uni-app提供的form组件来创建表单。同时,我们还需要使用input组件来创建每个表单项。
下面是一个示例代码:
```html
<template>
<form @submit="submitForm">
<div class="uni-form-item">
<label class="uni-label">姓名:</label>
<input type="text" v-model="name" placeholder="请输入姓名" />
</div>
<div class="uni-form-item">
<label class="uni-label">班级:</label>
<input type="text" v-model="className" placeholder="请输入班级" />
</div>
<div class="uni-form-item">
<label class="uni-label">学号:</label>
<input type="text" v-model="studentId" placeholder="请输入学号" />
</div>
<div class="uni-form-item">
<label class="uni-label">座号:</label>
<input type="text" v-model="seatNumber" placeholder="请输入座号" />
</div>
<div class="uni-form-item">
<label class="uni-label">性别:</label>
<input type="radio" v-model="gender" value="male" />男
<input type="radio" v-model="gender" value="female" />女
</div>
<div class="uni-form-item">
<label class="uni-label">爱好:</label>
<input type="checkbox" v-model="hobbies" value="reading" />阅读
<input type="checkbox" v-model="hobbies" value="music" />音乐
<input type="checkbox" v-model="hobbies" value="sports" />运动
</div>
<div class="uni-form-item">
<label class="uni-label">年龄:</label>
<input type="text" v-model="age" placeholder="请输入年龄" />
</div>
<div class="uni-form-item">
<button type="submit" class="uni-btn uni-btn-primary">提交</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
className: '',
studentId: '',
seatNumber: '',
gender: '',
hobbies: [],
age: ''
}
},
methods: {
submitForm() {
// 在这里处理表单提交逻辑
console.log(this.name, this.className, this.studentId, this.seatNumber, this.gender, this.hobbies, this.age)
}
}
}
</script>
```
在上面的代码中,我们使用input组件创建了文本输入框、单选框和复选框,使用form组件包裹了所有表单项,并在submitForm方法中处理表单的提交逻辑。
当用户点击提交按钮时,表单会自动触发submit事件,我们可以在该事件上监听并调用submitForm方法来处理表单数据。在这个方法中,我们可以使用this关键字来获取表单中的每个输入框的值,并将它们传递给后端服务器进行处理。
这就是一个简单的uni-app表单页面的实现。你可以根据自己的需要来修改和扩展这个示例代码。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)