unia-app picker 传入的数据类型为数组对象 Object

最新推荐文章于 2024-01-23 15:32:28 发布

keke 可乐

最新推荐文章于 2024-01-23 15:32:28 发布

阅读量938

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： javascript uni-app 前端

本文链接：https://blog.youkuaiyun.com/zhiyuan1208/article/details/120322779

uniapp 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中使用Picker组件来创建一个国家选择列表。示例代码展示了如何设置`range-key`属性为'name'，并绑定数据数组，使得用户可以滚动选择中国、美国、巴西或日本等国家。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<picker @change="bindPickerChange" :value="index" :range-key="'name'" :range="arrays">
	<view class="uni-input">{{arrays[index].name}}</view>
</picker>

其中range-key为String类型需要在双引号中再加单引号。

数据格式

arrays:[{name:'中国'},{name:'美国'},{name:'巴西'},{name:'日本'}],
index: 0,

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

keke 可乐

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app实战之社区交友APP（1）项目介绍和环境搭建

CUFEECR的博客

01-18

7687

社区交友项目实战，基于uni-app开发，实现安卓、iOS、微信小程序、支付宝小程序等多端发布，后端数据接口采用Django实现，包含帖子、话题、搜索、会员、聊天、广告位等模块。开发环境最核心的是HBuilderX，为了加速开发，可以安装所需的插件；创建uni-app项目后，即可运行到APP、小程序等多端，也可以运行到真机。安卓手机调试，需要链接数据线并打开USB调试，可以实现动态调试；iOS真机调试需要先点击信任机构，才能运行；微信小程序调试和支付宝小程序调试均可以安装开发者工具，或者进行真机调试。

uni-app APP支付 uni.requestPayment APP微信支付

qq_19484091的博客

07-03

6126

JS部分代码 zhifu(){ //APP支付 // #ifdef APP-PLUS uni.showLoading({title: '加载中',}) uni.request({ url: getApp().globalData.https + '/wap.php/Order/pay_course_order',//支付订单接口链接 data: { oid:data.oid,//订单号 }, method: 'POST', header: getApp().global

参与评论您还未登录，请先登录后发表或查看评论

uniapp用对象的形式实现picker

weixin_59638880的博客

04-02

557

代码 <picker @change="change($event, options)" :value="index" :range="options" range-key="name" class="ak-fill-picker" v-if="number == 1"> <view class="uni-input">{{options[index].name}}</view> </picker> data ...

uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据

热门推荐

qq_38541936的博客

12-10

2万+

关于uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据文章目录先直接上展示和代码使用介绍获取选择的数据总结先直接上展示和代码这是完成后的效果展示 template中的代码 <view class="info-item"> 货主： <picker @change="bindPickerChange($event,storageCustomList[index])" :value="index" :range="storageCustomL

uniapp picker 获取数组对象值

weixin_43886375的博客

12-22

1647

如果你picker选择遇到了后台给你对象数组的情况如何取值呢。:range-key="‘money’"必须要加单引号。如果不加上单引号会变成以下结果。

uni-app.01.picker如何使用后端传递过来的对象列表作为数据源

潮汐先生的专栏

03-10

2140

uni-app的picker如何使用后端传递过来的对象列表作为数据源引言具体实现picker之普通选择器前端代码关键代码说明最终效果引言今天要实现uni-app中的一个新增司机账户的功能，司机首先要选择该账户所属平台上哪一个客户，这里使用到了uni-app的picker picker是从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。实现上述功能我们只需要选择默认的普通选择器即可具体实现 picker之普通

uni-app 中的 picker 组件基于后台对象数组数据格式的使用

猫头虎技术团队：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作+：Libin9iOak ，万粉变现+：优快云WF，猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务！全网搜：猫头虎技术团队，点击文章底部名片或直接私信我一切皆可谈，快找虎哥！

08-18

1744

uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的 picker 组件基于后台对象数组数据格式的使用uni-app 中的

uni-app 之组件入门教程 uniapp在线教程 uni app视频教程

06-20

《uni-app组件入门教程详解》 uni-app是一个跨平台的前端框架，由HBuilderX团队开发，它允许开发者使用一套代码实现多端部署，包括iOS、Android、微信小程序、支付宝小程序、百度小程序等多个平台。本教程将深入...

Uni-app框架

2201_75769207的博客

06-15

567

具体而言，开发者只需要编写一次代码，就可以将应用程序部署到多个平台上，包括iOS、Android、Web和小程序等。Uni-app框架是由DCloud公司开发的，这公司还开发了HBuilder X开发工具，该工具可以让开发者更容易地使用Uni-app进行开发和部署。此外，Uni-app提供了一种名为“条件编译”的特性，可以根据特定的平台或设备来编写和运行不同的代码。总的来说，Uni-app是一个强大的跨平台开发框架，让开发人员在多个平台上设计、开发和部署应用程序变得更加容易。

uni-app 系列之（四）—— 生命周期

且听风吟的博客

03-19

531

uni-app 生命周期

uniapp开发数组对象使用picker组件

weixin_46382167的博客

10-25

479

uniapp开发数组对象使用picker组件 range-key属性值必须是字符串

uniapp中的picker为对象数组，range，range-key设置了，显示出的值为[obiect object]

LLL_liuhui的博客

08-04

5750

问题：代码如下： <evan-form-item label="与户主关系"> <picker class="form-item-picker" @change="relationshipChange" :range="relationshipData" :value="relationship" :range-key="name"> <!-- @change用于获取弹出框改变的值，:range用于循环遍历relationshipData数组将数组内容循环

uniapp的picker组件demo

记录本人工作中遇到的问题、经验总结以及分享。

06-06

2192

【代码】uniapp的picker组件demo。

uniapp的picker使用

ybyshezhang的博客

01-26

2206

uniapp的picker使用 picker普通模式的使用如果你的数据是对象数组就会有个坑弹出来的的选项直接是[object Object] 解决办法==》只需要将rang-key中的字符串加上单引号即可 :range-key="‘name’" 如下代码所示 <picker mode="selector" :range="userList" @change="choice1" :value="aIndex" :range-key="'name'"> <view class="p

uniapp的picker组件单列模式下range绑定对象数组的使用注意点

weixin_46061878的博客

01-17

2341

uniapp的picker单列用法和小坑

对象数据如何转化成数组

daishu_shu的博客

04-21

7256

文章目录前言一、后端给的数据二、如何转换三、最终结果前言项目中后端给的数据有时候不可能完全符合前端的数据要求，比如element-ui+vue项目组合中，下拉框数据是数组的形式。然而后端同事给的确是对象数据，当然你可以和后端协商改成你想要的数据… 但是这样往往比较麻烦，喜欢安静写代码的前端决定自己转换。提示：正文内容一、后端给的数据二、如何转换 console.log('res:', res); let resObj = res.data.data; //获取后

uniapp滚动选择器 picker