uniapp简单地址表单提交,获取表单数据
时间: 2024-09-29 08:13:47 浏览: 50
UniApp中的地址表单提交通常涉及Vue组件开发,你可以使用`<form>`元素配合`v-model`指令来收集用户输入的数据。以下是简单的步骤:
1. 首先,在HTML部分创建一个表单结构:
```html
<template>
<view>
<form @submit.prevent="submitForm">
<input type="text" v-model="address.street" placeholder="街道地址"/>
<input type="text" v-model="address.city" placeholder="城市"/>
<input type="text" v-model="address.province" placeholder="省份"/>
<!-- 添加更多地址字段,如果需要 -->
<button type="submit">提交</button>
</form>
</view>
</template>
```
2. 然后,在对应的JS部分定义一个data属性来存储地址对象,并编写提交函数:
```javascript
<script setup>
import { ref } from 'vue';
const address = ref({
street: '',
city: '',
province: ''
});
function submitForm(e) {
e.preventDefault(); // 阻止默认表单提交行为
const formData = address.value; // 获取当前表单的数据
console.log('表单数据:', formData);
// 这里可以将formData发送到服务器或者做进一步处理
}
</script>
```
当你点击提交按钮时,`submitForm`函数会被触发,其中的`address.value`会包含用户填写的完整地址信息。
阅读全文