uni-app:实现picker下拉列表的默认值设置

效果

分析

1、在data中将index8的初始值设置为-1,表示未选择任何选项:

index8: -1, //选择的下拉列表下标

2、在bindPickerChange8事件处理函数中添加条件判断。如果选择的值是-1,则将this.index8设置为"请输入",否则将其设置为选择的下标值 

bindPickerChange8: function(e) {

         if (e.detail.value === -1) {

                this.index8 = '请输入';

        } else {

                this.index8 = e.detail.value;//更新选择的下拉下标 

                this.ifname = this.selectDatas8[e.detail.value]; // 更新选择的数据

        }

        // 其他逻辑...

}

 3、在模板中使用{{selectDatas8[index8]}}来显示选择的值。如果index8为-1,则会显示"请输入"

{{index8 === -1 ? '请输入' : selectDatas8[index8]}}

完整代码 

<template>
	<view>
		<picker style="border:1px solid black" name="ifname" @change="bindPickerChange8" :value="index8" :range="selectDatas8">
		  <view>
		    {{index8 === -1 ? '请输入' : selectDatas8[index8]}}
		  </view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				index8: -1, //选择的下拉列表下标,
				selectDatas8: ['ETH0', 'ETH1', 'WLAN1', 'WLAN2'], //下拉数组
				ifname: '', //网口选择
			};
		},
		methods: {
			//下拉列表选择模式
			bindPickerChange8: function(e) {
				console.log('picker发送选择改变,携带下标为', e.detail.value)
				console.log('picker发送选择改变,携带值为' + this.selectDatas8[e.detail.value]) 
				if (e.detail.value === -1) {
				    this.index8 = '请输入';
				  } else {
				    this.index8 = e.detail.value;//更新选择的下拉下标  
				    this.ifname = this.selectDatas8[e.detail.value]; // 更新选择的数据
				  }
			},
		},
	};
</script>
<style>

</style>

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3中常用的新组件

一、Fragment vue2中&#xff0c;组件必须有一个根标签 vue3中&#xff0c;组件可以没有根标签&#xff0c;内部会将多个标签包含在一个Fragment虚拟元素中。 优点&#xff1a;减少标签层级。 二、Teleport&#xff08;传送门&#xff09; 作用&#xff1a;将组件的 html …

掌握CSS Flexbox,打造完美响应式布局,适配各种设备!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 基…

【速看】如何通过合理的封装,让你的自动化脚本更上一层楼!

1. 前言 上一篇推文利用一个在图片范围内实现随机坐标点击的例子&#xff0c;去教会大家如何将自己想要的效果实现出来&#xff0c;受到大家的热情反响&#xff0c;在我们官方讨论群中&#xff0c;还有大佬对我们的示例代码进行优化改进&#xff0c;做了很多合理的函数封装&…

HCIA数据通信——交换机(Vlan间的通信与安全)

前言 之前的提到了交换机的概念和实验。不过交换机的一些功能还没有说完&#xff0c;我们的实验也仅仅是阻止相同地址段的IP地址互通&#xff0c;也没有用到子接口和路由器。显然&#xff0c;那样的配置过于简单。 端口安全 Port Security&#xff08;端口安全&#xff09;的功…

【1.2】神经网络:神经元与激活函数

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 神经网络&#xff08;随缘更新&#xff09; ✨特色…

node开发微信群聊机器人第⑤章

▍PART 序 看本文时&#xff0c;请确保前4章都已经看过&#xff0c;不然本章你看着看着思维容易跳脱&#xff01;再一个机器人教程只在公众号&#xff1a;“程序员野区”首发。csdn会跟着发一份&#xff0c;未经博主同意&#xff0c;请勿转载&#xff01;欢迎分享到自己的微信…

leetCode 76. 最小覆盖子串 + 滑动窗口

76. 最小覆盖子串 - 力扣&#xff08;LeetCode&#xff09; 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻…

【iOS免越狱】利用IOS自动化web-driver-agent_appium-实现自动点击+滑动屏幕

1.目标 在做饭、锻炼等无法腾出双手的场景中&#xff0c;想刷刷抖音 刷抖音的时候有太多的广告 如何解决痛点 抖音自动播放下一个视频 iOS系统高版本无法 越狱 安装插件 2.操作环境 MAC一台&#xff0c;安装 Xcode iPhone一台&#xff0c;16 系统以上最佳 3.流程 下载最…

Golang 自定义函数库(个人笔记)

1.用字符串连接切片元素&#xff08;类似php implode&#xff09; package mainimport ("fmt""strconv""strings" )func main() {data : []int{104, 101, 108, 108, 111}fmt.Println(IntSliceToString(data, ",")) }func IntSliceToS…

stable-diffusion-webui环境部署

stable-diffusion-webui环境部署 1. 环境创建2. 安装依赖库3.下载底模4.运行代码5. 报错信息报错1报错2 1. 环境创建 创建虚拟环境 conda create -n env_stable python3.10.0进入虚拟环境 conda activate env_stableclone源码 git clone https://github.com/AUTOMATIC1111/stab…

用VSCODE启动Java项目

下载插件 推荐下载插件 启动 在vscode中打开项目或将项目拖进vscode,等进度条加载完成即成启动项目

拒绝拖延,从我做起!

拒绝拖延&#xff0c;从我做起&#xff01; 如果有一件事&#xff0c;对你的未来很重要&#xff0c;千万不要说等以后再做&#xff0c;这是无限拖延的借口【等有时间再做】的真正含义是&#xff0c;闲得无聊再去做&#xff0c;意味着事情即不重要也不紧急该做的重要事情不做&a…

敏捷战略下的目标管理

1. 生而敏捷的 OKR 敏捷战略规划的周期相对较长&#xff0c;一般是以年为单位在做规划&#xff0c;通常是 3~5年。在战略规划之后&#xff0c;需要有更短周期的目标管理去做承接。现今&#xff0c; OKR 成为承接敏捷战略最好的目标管理工具。 将OKR 和战略、愿景、使命之间的关…

使用VisualStudio生成类图结构图for高效阅读代码

使用VisualStudio高效阅读代码 前言相关准备导入工程利用VisualStudio生成类图&#xff0c;结构体调用关系利用EnterpriseArchitect(EA)画时序图 前言 目前市面上代码阅读的IDE工具非常丰富&#xff0c;也各有千秋。由于工作经历原因&#xff0c;研发机经历过windows、Mac、Li…

ChatGPT和Copilot协助Vue火速搭建博客网站

AI 对于开发人员的核心价值 网上会看到很多 AI 的应用介绍或者教程 使用 AI 聊天&#xff0c;咨询问题 —— 代替搜索引擎使用 AI 写各种的电商文案&#xff08;淘宝、小红书&#xff09;使用 AI 做一个聊天机器人 —— 这最多算猎奇、业余爱好、或者搞个套壳产品来收费 以上…

Leetcode—26.删除有序数组中的重复项【简单】

2023每日刷题&#xff08;十&#xff09; Leetcode—26.删除有序数组中的重复项 双指针法实现代码 int removeDuplicates(int* nums, int numsSize){int i 0;int j 1;while(j < numsSize) {if(nums[j] ! nums[i]) {nums[i] nums[j];}j;}return i 1; } 运行结果 之后我…

TSINGSEE青犀基于AI视频识别技术的平安校园安防视频监控方案

一、背景需求 因学校频频出治安事件&#xff0c;所以必须要加强学校的安防工作&#xff0c;目前来看&#xff0c;大部分校园都建设了视频监控来预防保障校园安全。但是传统的视频监控系统&#xff0c;主要通过设备来录像以及人员时时监控来进行。这种监管方式效率十分低下&…

[论文精读]The minimal preprocessing pipelines for the Human Connectome Project

论文原文&#xff1a;The minimal preprocessing pipelines for the Human Connectome Project - ScienceDirect 未完待续 1. 论文逐段精读 1.1. Abstract ①The Human Connectome Project (HCP) includes multiple magnetic resonance imaging (MRI) data ②HCP needs more p…

【STM32】STM32中断体系

一、STM32的NVIC和起始代码中的ISP 1.NVIC(嵌套向量中断控制器) (1)数据手册中相关部分浏览 (2)地址映射时0地址映射到Flash或SRAM (3)中断向量表可以被人为重新映射&#xff0c;一般用来IAP中 (4)STM32采用一维的中断向量表 (5)中断优先级设置有点复杂&#xff0c;后面细说 1…

leetcode 146. LRU 缓存

2023.10.26 本题核心就是要将map中&#xff0c;最近最少操作的那个key给剔除掉&#xff0c;于是我们可以使用双端链表LinkedList 来维护每个元素的操作情况&#xff0c;最近操作的元素就将其移至表头&#xff0c;越久没操作的元素&#xff0c;自然就会沉到表尾。 一旦缓存满了…
最新文章