uni-app:实现picker下拉列表

news2024/12/26 22:48:17

效果

代码 

<template>
	<view class="container">
		<picker name="info" @change="bindPickerChange9" :value="index9" :range="selectDatas9">
			<view class="right">
				<view class="right_left">{{ selectDatas9[index9] }}
				</view>
				<view class="right_right">></view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index9: 0, //选择的下拉列表下标,默认为第一项,
				selectDatas9: ['数据1', '数据2', '数据3'], //下拉数组
				info: '', //选择的下拉数据	
			}
		},
		onLoad() {

		},
		methods: {
			//下拉列表选择模式
			bindPickerChange9: function(e) {
				// console.log('picker发送选择改变,携带下标为', e.detail.value)
				// console.log('picker发送选择改变,携带值为' + this.selectDatas9[e.detail.value])
				this.info = this.selectDatas9[e.detail.value]; //更新选择的数据
				this.index9 = e.detail.value; //更新选择的下拉下标
				// console.log(this.info)			
			},
		}
	}
</script>

<style>
	.right {
		color: rgb(134, 133, 133);
		display: flex;
		border:1px solid black;
		padding:2%;
	}

	.right_left {
		width: 90%;
	}

	.right_right {
		width: 10%;
		text-align: right;
		color: #808080;
	}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1038683.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx负载均衡详解

一、负载均衡介绍 1、负载均衡的定义 单体服务器解决不了并发量大的请求&#xff0c;所以&#xff0c;我们可以横向增加服务器的数量&#xff08;集群&#xff09;&#xff0c;然后将请求分发到各个服务器上&#xff0c;将原先请求集中到单个服务器上的情况改为将请求分发到多…

【EI会议】第三届大数据、人工智能与风险管理国际学术会议 (ICBAR 2023)

第三届大数据、人工智能与风险管理国际学术会议 (ICBAR 2023) 2023 3rd International Conference on Big Data, Artificial Intelligence and Risk Management 第三届大数据、人工智能与风险管理国际学术会议&#xff08;ICBAR2023&#xff09;将于2023年11月24-26日在中国成…

18643 鸡马立克氏病诊断技术

声明 本文是学习GB-T 18643-2021 鸡马立克氏病诊断技术. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了鸡马立克氏病临床诊断&#xff0c;以及病毒分离、琼脂免疫扩散试验、PCR 检测和荧光定量 PCR 检测等实验室检测的技术要求…

【通世智库】彭子商:秋风集

我的人生阅历是丰富的&#xff0c;感受是复杂的。 我出生于1949年&#xff0c;父亲是中国老一代旧知识分子&#xff0c;是重庆宽仁医院(教会医院)最后一任院长。【作者&#xff1a;彭子商;来源&#xff1a;通世智库;编撰&#xff1a;张小青】 我同共和国一起成长&#xff0c;经…

开源视频处理软件OBS Studio下载和使用

为了免费使用麦克风降噪功能&#xff0c;可以使用可以使用OBS Studio软件。在清华大学开源软件镜像站提供的OBS Studio镜像源上下载或者上csdn 找我的内容源0积分下载。链接https://download.csdn.net/download/A41915460/88371699 录VCR的时候提取打好纸张发言稿件&#xff0c…

Vue3最佳实践 第五章 Vue 组件应用 5 (Vue 插件)

想了解Vue插件所以你看了官方文档却看不懂&#xff0c;或者你想知道Vue.use()方法和插件的关系。在本文档中&#xff0c;我们将参照文档讲解插件制作的基础知识&#xff0c;了解基础知识后&#xff0c;我们将制作与更实用的下拉菜单和脚本加载相关的插件。读完之后&#xff0c;…

浅谈智慧医院的信息集成平台建设与配电设计方案

安科瑞电气股份有限公司 上海嘉定201801 摘要&#xff1a;随着云计算、5G、大数据、物联网等技术的不断发展与进步&#xff0c;推动着智慧医院建设的飞速发展。智慧医院建设强调医院内部业务的多流程联动和医疗信息互联互通的高协同效率&#xff0c;突出了数据驱动下构建高质量…

视频号如何下载到相册,无水印高清下载保存到手机相册

微信视频号是一个全新的内容记录与创作平台&#xff0c;他不同于订阅号与服务号&#xff0c;很多人都有这么一个需求视频号视频怎么下载保存到手机相册&#xff0c;不同的人思路要有所不同&#xff0c;今天这篇内容就和大家聊聊如何下载并保存到手机相册。 视频号如何下载到相…

苹果手机屏幕上的悬浮球怎么设置(必备教程)

苹果手机有一个好用又好玩的功能叫做悬浮球&#xff0c;又名白色小圆点。该功能最大的优点就是给用户提供了便携式访问&#xff0c;它相当于一个快捷键&#xff0c;能够让用户在无需返回主屏幕的情况下快速完成一些其他操作。 但是一些新用户可能还不知道如何设置悬浮球。苹果…

uni-app:实现密码框内容展示与隐藏

效果 代码 <template><view class"container"><view class"item_left"><view>密码</view><view class"eye_position" taptoggleShowPassword><image :srceye v-ifisShowPassword /><image :srcey…

iTOP-RK3588开发板体验RKNN_DEMO

RKNN 是 Rockchip NPU 平台(也就是开发板)使用的模型类型&#xff0c;是以.rknn 结尾的模型文件。 RKNN SDK 提 供 的 demo 程 序 中 默 认 自 带 了 RKNN 模 型 &#xff0c; 在 RKNN SDK 的 examples/rknn_yolov5_demo/model/RK3588/目录下&#xff0c;如下图所示&#xff…

robotframework在Jenkins执行踩坑

1. Groovy Template file [robot_results.groovy] was not found in $JENKINS_HOME/email_template 1.需要在managed files 添加robot_results.groovy。这个名字需要和配置在构建项目里default content一致&#xff08;Extended E-mail Notification默认设置里Default Content…

python水仙花数

水仙花数是3位整数&#xff08;100-199&#xff09;&#xff0c;它的各位数字立方和等于该数本身。请编写程序。 源代码&#xff1a; print(100-199的水仙花数&#xff1a;) for i in range(100,200): s str(i) a int(s[0]) b int(s[1]) c int(s[2]) …

基于SpringBoot的学科竞赛管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 学生功能模块的实现 管理员功能模块的实现 教师管理界面 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着国家教育体制的改革&#xff0c;全国各地举办的竞赛活动数目也是逐年增加&#xff0c;面对如此大的数目…

使用CRM系统提高潜在客户质量

客户是企业发展的重要资源&#xff0c;如果销售人员获得更优质的潜在客户并对这些潜在客户进行跟踪&#xff0c;企业将获得更高的销售额。想要做到这点&#xff0c;就使用CRM销售管理系统吧&#xff01;下面我们说说&#xff0c;CRM系统如何提高潜在客户质量&#xff1f; 能够…

车载娱乐系统之Android系统CarFramework流程

目录 一&#xff0c;背景介绍 1.1 Android Automotive与整个Android生态系统的关系 1.2 Android Automotive架构 二&#xff0c;CarService启动流程 三&#xff0c;CarService源码分析 四. Car API 使用方式 4.1 编译 Car API 4.2 使用 Car API 一&#xff0c;背景介…

基于Python开发的高德地图+58租房系统(源码+可执行程序+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python开发的高德地图58租房系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xf…

一级浪涌保护器的应用解决方案

浪涌是指电力线路上出现的短暂的过电压或过电流&#xff0c;它们通常由雷击、开关操作、电力故障等原因引起&#xff0c;对电气设备和电子信息系统造成严重的损害。地凯科技浪涌保护器&#xff08;SPD&#xff09;是一种用于限制瞬态过电压和泄放电涌电流的装置&#xff0c;它至…

阿里云七代云服务器实例、倚天云服务器及通用算力型和经济型实例规格介绍

在目前阿里云的云服务器产品中&#xff0c;既有五代六代实例规格&#xff0c;也有七代和八代倚天云服务器&#xff0c;同时还有通用算力型及经济型这些刚推出不久的新品云服务器实例&#xff0c;其中第五代实例规格目前不在是主推的实例规格了&#xff0c;现在主售的实例规格是…