在 UniApp 中使用 uv-vi
组件创建表单可以收集用户信息和单选框的值,你可以按照以下步骤进行操作:
- 确保你已经安装了 UniApp,并在项目中引入了 Vue.js。
- 在项目的页面文件(例如
pages/index/index.vue
)中,引入uv-vi
组件库:
<template> <view class="container"> <uv-form @submit="submitForm"> <uv-input label="姓名" type="text" v-model="formData.name"></uv-input> <uv-input label="邮箱" type="email" v-model="formData.email"></uv-input> <uv-radio-group v-model="formData.gender"> <uv-radio label="男" value="male"></uv-radio> <uv-radio label="女" value="female"></uv-radio> </uv-radio-group> <uv-button type="primary" @click="submitForm">提交</uv-button> </uv-form> </view> </template> <script> export default { data() { return { formData: { name: '', email: '', gender: '' } }; }, methods: { submitForm() { // 处理表单提交的逻辑 console.log(this.formData); } } }; </script>
在这个示例中,我们使用了 uv-input
组件来收集用户的姓名和邮箱信息,并通过 v-model
指令与 Vue 实例中的对应数据进行双向绑定。同时,我们也使用了 uv-radio-group
和 uv-radio
组件来收集用户的性别信息。当用户选择一个单选框时,formData.gender
的值会自动更新为所选项的 value
值。
在 submitForm
方法中,你可以通过 this.formData
来获取整个表单中所收集的用户信息和单选框的值,并进行相关处理。
这样,你就可以在 UniApp 中使用 uv-vi
组件创建表单,并同时收集用户信息和单选框的值了。同样,你也可以结合其他组件和功能来增强和定制你的表单。详细的组件使用方法可以参考 uv-vi
的文档。