uniapp form表单
时间: 2023-10-24 07:06:38 浏览: 128
uniapp 表格.rar
uniapp中的form表单可以通过使用uni-form组件来实现。在form组件中,可以使用input、textarea、radio、checkbox等表单元素,通过v-model绑定数据,再通过submit事件提交表单数据。
示例代码如下:
```
<template>
<view>
<form @submit="submitForm">
<view>
<text>姓名:</text>
<input type="text" v-model="name" />
</view>
<view>
<text>性别:</text>
<radio-group v-model="gender">
<radio value="male">男</radio>
<radio value="female">女</radio>
</radio-group>
</view>
<view>
<text>爱好:</text>
<checkbox-group v-model="hobbies">
<checkbox value="reading">阅读</checkbox>
<checkbox value="music">音乐</checkbox>
<checkbox value="sports">运动</checkbox>
</checkbox-group>
</view>
<button type="submit">提交</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
gender: '',
hobbies: []
}
},
methods: {
submitForm() {
console.log(this.name, this.gender, this.hobbies)
}
}
}
</script>
```
阅读全文