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.hqwc.cn/news/151242.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 容器服务的注册、发现及Docker安全

目录 Docker容器服务的注册和发现 1、什么是服务注册与发现&#xff1f; 2、什么是consul consul的部署 1、环境准备 2、部署consul服务器 1&#xff09;建立 Consul 服务 2&#xff09;设置代理&#xff0c;在后台启动 consul 服务端 3&#xff09;查看集群信息 4&a…

有线网卡通过无线网卡使其它设备上网

我现在的网络是无线路由器连接公网&#xff0c;电脑上的无线网卡连接路由器使电脑上网&#xff0c;这是完全正常的连接方式。 我现在又有了一台嵌入式设备&#xff0c;它只有有线网口&#xff0c;所以就只能用有线的方式连网&#xff0c;但是我的无线路由器不在电脑旁边&#x…

力扣在线OJ——栈和队列

目录 &#x1f341;一、用两个队列实现栈 &#x1f315;&#xff08;一&#xff09;、题目&#xff08;力扣链接&#xff1a;用队列实现栈 &#xff09; &#x1f315;&#xff08;二&#xff09;、注意 &#x1f315;&#xff08;三&#xff09;、解答 ⭐️1.注意事项 ⭐…

社区迭代|ETLCloud社区新增“论坛”啦!

ETLCloud社区是谷云科技RestCloud旗下面向开发工程师、集成研发人员等技术人员提供全方位交流和学习的开放式平台&#xff0c;也是ETLCloud在产品生态赋能上的一大亮点&#xff0c;旨在能够帮助更多的用户更快捷高效的掌握技能&#xff0c;也为企业提供集成人才培养赋能&#x…

TensorFlow学习:使用官方模型和自己的训练数据进行图片分类

前言 教程来源&#xff1a;清华大佬重讲机器视觉&#xff01;TensorFlowOpencv&#xff1a;深度学习机器视觉图像处理实战教程&#xff0c;物体检测/缺陷检测/图像识别 注&#xff1a; 这个教程与官网教程有些区别&#xff0c;教程里的api比较旧&#xff0c;核心思想是没有变…

使用一个Series序列减去另一个Series序列Series.subtract()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 求两个序列中对应位置 的各元素的差 a.subtract(b) [太阳]选择题 关于以下代码的说法中正确的是? import pandas as pd a pd.Series([1,2,3]) print("【显示】a:\n",a) b pd.Seri…

windows qemu安装飞腾Aarch64 操作系统 亲测

在win7&#xff08;X86架构CPU&#xff09;下使用QEMU虚拟机运行银河麒麟操作系统&#xff08;ARM架构CPU&#xff09; 1、下载并安装QEMU虚拟机软件 https://qemu.weilnetz.de/w64/2020/ 2、准备好ARM银河麒麟操作系统.iso文件 这里是 Kylin-Desktop-V10-Release-2107-ar…

Kafka入门05——基础知识

目录 副本数据同步原理 HW和LEO的更新流程 第一种情况 第二种情况 数据丢失的情况 解决方案 Leader副本的选举过程 日志清除策略和压缩策略 日志清除策略 日志压缩策略 Kafka存储手段 零拷贝&#xff08;Zero-Copy&#xff09; 页缓存&#xff08;Page Cache&…

服务运营 |文章精选:运筹学视角下的众包竞赛

作者&#xff1a; Guo 编者按&#xff1a;众包竞赛&#xff08;Crowdsourcing Contests&#xff09;是一种利用大规模在线社群或平台来解决问题、完成任务或创新的方法。众包竞赛通常在在线平台上进行&#xff0c;这些平台提供任务发布、参与者注册、提交作品、评审等功能。一…

Linux常用命令——chpasswd命令

在线Linux命令查询工具 chpasswd 批量更新用户口令的工具 补充说明 chpasswd命令是批量更新用户口令的工具&#xff0c;是把一个文件内容重新定向添加到/etc/shadow中。 语法 chpasswd(选项)选项 -e&#xff1a;输入的密码是加密后的密文&#xff1b; -h&#xff1a;显示…

知识图谱相关的操作

微软生成自己的图谱&#xff1a;GitHub - microsoft/SmartKG: This project accepts excel files as input which contains the description of a Knowledge Graph (Vertexes and Edges) and convert it into an in-memory Graph Store. This project implements APIs to searc…

Linux shell编程学习笔记16:bash中的关联数组

上一节我们探讨了普通的数组&#xff0c;即使用数字下标来索引数组中不同的元素的数组&#xff0c;也可以称之为索引数组。 相比纯粹的数字&#xff0c;字符串不仅能表明含义&#xff0c;也更便于记忆使用&#xff0c;于是就有了关联数组。 一、关联数组概述 bash 从4.0开始支…