uniapp vue3 from 表单案例

在 UniApp 中使用 Vue3 实现表单功能时，通常会结合 Vue3 的 Composition API 和 UniApp 提供的组件及 API 来完成。以下是一个完整的示例，展示如何在 UniApp 中基于 Vue3 实现一个基础表单功能，包括输入框、下拉选择框、单选框和表单提交。 ### 基础表单实现案例 #### 1. 表单结构设计 ```html <template> <view class="form-container"> <view class="form-group"> <text>用户名:</text> <input v-model="formData.username" placeholder="请输入用户名" /> </view> <view class="form-group"> <text>性别:</text> <picker mode="selector" range="{{['男', '女']}}" v-model="formData.gender"> <view class="picker"> {{ formData.gender === 0 ? '男' : '女' }} </view> </picker> </view> <view class="form-group"> <text>是否订阅:</text> <switch v-model="formData.subscribe" /> </view> <button @click="submitForm">提交</button> </view> </template> ``` #### 2. Vue3 Composition API 实现逻辑 ```html <script setup> import { reactive } from 'vue'; const formData = reactive({ username: '', gender: 0, // 0: 男, 1: 女 subscribe: false }); const submitForm = () => { // 模拟提交数据 console.log('提交的表单数据:', formData); uni.showToast({ title: '提交成功', icon: 'success' }); }; </script> ``` #### 3. 样式设计 ```html <style scoped> .form-container { padding: 20px; } .form-group { margin-bottom: 15px; } input { border: 1px solid #ccc; padding: 8px; width: 100%; } .picker { padding: 8px; border: 1px solid #ccc; } </style> ``` ### 实现说明 - **数据绑定**：使用 `v-model` 实现双向绑定，确保用户输入的内容能够实时反映到 `formData` 中。 - **选择器组件**：`picker` 组件用于性别选择，通过 `mode="selector"` 配合 `range` 属性定义可选范围[^1]。 - **开关组件**：`switch` 组件用于布尔值输入，例如是否订阅邮件通知。 - **表单提交**：点击按钮触发 `submitForm` 方法，并通过 `uni.showToast` 显示提交成功的提示。 ### 扩展功能建议 - **表单验证**：可以结合 `Vuelidate` 或 `VeeValidate` 等第三方验证库进行更复杂的表单验证逻辑。 - **异步提交**：实际开发中，表单提交通常需要发送请求到后端，可以使用 `axios` 或 `uni.request` 实现异步数据提交。 - **动态表单**：通过 `v-for` 动态生成表单项，适用于不确定数量输入的场景。 ---