uni-app编写一个带有姓名,班级,学号,座号,性别,爱好,年龄的个人信息表
时间: 2024-06-09 08:11:15 浏览: 97
可以使用uni-app的模板语法和表单组件来实现个人信息表的编写。
首先,在页面的template中添加表单组件,包括输入框和单选框,以及提交按钮:
```html
<template>
<view class="container">
<form @submit.prevent="submitForm">
<view class="form-item">
<text class="label">姓名:</text>
<input type="text" v-model="name" placeholder="请输入姓名" />
</view>
<view class="form-item">
<text class="label">班级:</text>
<input type="text" v-model="className" placeholder="请输入班级" />
</view>
<view class="form-item">
<text class="label">学号:</text>
<input type="text" v-model="studentId" placeholder="请输入学号" />
</view>
<view class="form-item">
<text class="label">座号:</text>
<input type="text" v-model="seatNumber" placeholder="请输入座号" />
</view>
<view class="form-item">
<text class="label">性别:</text>
<radio-group v-model="gender">
<radio value="male">男</radio>
<radio value="female">女</radio>
</radio-group>
</view>
<view class="form-item">
<text class="label">爱好:</text>
<input type="text" v-model="hobby" placeholder="请输入爱好" />
</view>
<view class="form-item">
<text class="label">年龄:</text>
<input type="number" v-model="age" placeholder="请输入年龄" />
</view>
<button type="submit">提交</button>
</form>
</view>
</template>
```
然后,在页面的script中添加data和methods,用于存储表单数据和提交表单:
```javascript
<script>
export default {
data() {
return {
name: '',
className: '',
studentId: '',
seatNumber: '',
gender: '',
hobby: '',
age: ''
}
},
methods: {
submitForm() {
console.log('提交表单')
console.log(this.name)
console.log(this.className)
console.log(this.studentId)
console.log(this.seatNumber)
console.log(this.gender)
console.log(this.hobby)
console.log(this.age)
}
}
}
</script>
```
最后,添加样式代码:
```css
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.label {
margin-right: 20rpx;
}
button {
margin-top: 40rpx;
width: 100%;
height: 80rpx;
background-color: #007aff;
color: #fff;
font-size: 32rpx;
border: none;
border-radius: 10rpx;
}
</style>
```
这样,一个简单的个人信息表就完成了。用户可以在输入框中输入自己的信息,并选择性别,点击提交按钮后,可以在控制台中查看表单数据。
阅读全文