uniapp uni-ui获取本机当日日期直接填好并且可选择的表单
时间: 2023-09-17 17:09:09 浏览: 67
以下是一个可以获取本机当日日期并自动填写的uni-ui表单示例:
```
<template>
<view class="content">
<uni-form>
<uni-form-item label="日期">
<uni-datepicker :value="date" @change="dateChange"></uni-datepicker>
</uni-form-item>
<uni-form-item label="姓名">
<uni-input v-model="name"></uni-input>
</uni-form-item>
<uni-form-item label="性别">
<uni-radio-group v-model="gender">
<uni-radio value="male">男</uni-radio>
<uni-radio value="female">女</uni-radio>
</uni-radio-group>
</uni-form-item>
<uni-form-item label="联系电话">
<uni-input v-model="phone" type="number"></uni-input>
</uni-form-item>
<uni-form-item label="电子邮箱">
<uni-input v-model="email" type="email"></uni-input>
</uni-form-item>
<uni-form-item>
<uni-button type="primary" @click="submitForm">提交</uni-button>
</uni-form-item>
</uni-form>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
gender: '',
phone: '',
email: '',
date: new Date().toISOString().slice(0, 10) // 获取本机当日日期
}
},
methods: {
dateChange(e) {
this.date = e.target.value
},
submitForm() {
// 处理表单提交逻辑
}
}
}
</script>
```
在上面的示例中,我们使用了uni-datepicker组件来获取本机当日日期,并使用了v-model将日期值绑定到了data中的date变量上,实现了自动填写的功能。同时,我们还使用了uni-input、uni-radio-group等组件来实现了其他表单项。最后,在点击“提交”按钮时,我们可以将表单数据提交到后端进行处理。