小程序中用vant写一段用picker选择器选中并呈现数据,类似于表单
时间: 2024-05-25 21:15:56 浏览: 11
<template>
<van-form>
<van-field
v-model="name"
label="姓名"
placeholder="请输入姓名"
/>
<van-field
v-model="gender"
label="性别"
placeholder="请选择性别"
readonly
clickable
@click="showGenderPicker = true"
/>
<van-field
v-model="age"
label="年龄"
placeholder="请输入年龄"
type="number"
/>
<van-field
v-model="email"
label="邮箱"
placeholder="请输入邮箱"
type="email"
/>
<van-field
v-model="phone"
label="手机号码"
placeholder="请输入手机号码"
type="tel"
/>
</van-form>
<van-picker
v-model="gender"
title="选择性别"
:columns="genderOptions"
:show-toolbar="true"
:visible-item-count="5"
@confirm="showGenderPicker = false"
@cancel="showGenderPicker = false"
/>
</template>
<script>
export default {
data() {
return {
name: '',
gender: '',
age: null,
email: '',
phone: '',
genderOptions: [
{ text: '男', value: 'male' },
{ text: '女', value: 'female' },
{ text: '其他', value: 'other' }
],
showGenderPicker: false
}
}
}
</script>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)