uniapp循环使用uni-data-picker绑定值
时间: 2023-10-31 15:06:40 浏览: 178
uniapp uView u-picker组件三级联动Demo
可以使用v-for指令循环生成多个`uni-data-picker`组件,并将每个组件的值绑定到对应的数据项上。具体实现步骤如下:
1. 在 `data` 中定义数组,存储每个 `uni-data-picker` 组件对应的值。
```
data() {
return {
// 定义数组,存储每个 picker 的值
pickerValues: ['', '', '']
}
}
```
2. 在模板中使用 `v-for` 循环生成多个 `uni-data-picker` 组件,并将组件的值绑定到对应的数组项上。
```
<template>
<view>
<view v-for="(item, index) in 3" :key="index">
<uni-data-picker v-model="pickerValues[index]"></uni-data-picker>
</view>
</view>
</template>
```
3. 在 `methods` 中定义方法,用于获取所有 `uni-data-picker` 组件的值。
```
methods: {
// 获取所有 picker 的值
getPickerValues() {
console.log(this.pickerValues);
}
}
```
4. 在需要获取所有 `uni-data-picker` 组件的值的地方调用 `getPickerValues` 方法即可。
```
<template>
<view>
<view v-for="(item, index) in 3" :key="index">
<uni-data-picker v-model="pickerValues[index]"></uni-data-picker>
</view>
<view @click="getPickerValues">获取所有 picker 的值</view>
</view>
</template>
```
阅读全文