当前位置: 首页 > news >正文

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>

 

相关文章:

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

效果 分析 1、在data中将index8的初始值设置为-1&#xff0c;表示未选择任何选项&#xff1a; index8: -1, //选择的下拉列表下标 2、在bindPickerChange8事件处理函数中添加条件判断。如果选择的值是-1&#xff0c;则将this.index8设置为"请输入"&#xff0c;否则将…...

基于NB-iot技术实现财物跟踪的EA01-SG定位模块方案

NB-iot无线数传模块可做财物防盗窃器&#xff0c;让你的财物可定位跟踪&#xff01; 随着社会的发展&#xff0c;公共资源及共享资源的蓬勃发展&#xff0c;对资产管理和资产追踪有了新的需求&#xff0c;如&#xff1a;某儿童玩具车在商场外面提供车辆乘坐游玩服务&#xff0…...

挑战吧,HarmonyOS应用开发工程师

一年一度属于工程师的专属节日1024&#xff0c;多重活动亮相啦~ 参与活动即有机会获得HUAWEI Freebuds 5i 耳机等精美礼品&#xff01; 点击“阅读原文”查看更多活动详情&#xff01;...

图论05-【无权无向】-图的广度优先BFS遍历-路径问题/检测环/二分图/最短路径问题

文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 联通分量5. 环检测5.1 思路5.2 主要代码 6. 二分图检测6.1 思路6.2 主要代码6.2.1 遍历每个联通分量6.2.2 判断相邻两点的颜色是否一致 7. 最短路径问题7.1 思路7.2 代码 1. 代码…...

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…...

关于腾讯云轻量应用服务器性能测评,看这一篇文章就够了

腾讯云轻量应用服务器性能如何&#xff1f;为什么便宜是不是性能不行&#xff1f;腾讯云百科txybk.com从轻量应用服务器的CPU型号、处理器主频、内存、公网带宽、月流量和系统盘多方面来详细测评轻量性能&#xff0c;轻量应用服务器性价比高&#xff0c;并不是性能不行&#xf…...

HDFS集群NameNode高可用改造

文章目录 背景高可用改造方案实施环境准备配置文件修改应用配置集群状态验证高可用验证 背景 假定目前有3台zookeeper服务器&#xff0c;分别为zk-01/02/03&#xff0c;DataNode服务器若干&#xff1b; 目前HDFS集群的Namenode没有高可用配置&#xff0c;Namenode和Secondary…...

Spark集群中一个Worker启动失败的排错记录

文章目录 1 检查失败节点worker启动日志2 检查正常节点worker启动日志3 查看正常节点spark环境配置4 又出现新的ERROR4.1 报错解释4.2 报错解决思路4.3 端口报错解决操作 集群下电停机后再次启动时&#xff0c;发现其中一台节点的worker启动失败。 1 检查失败节点worker启动日…...

Mysql的JDBC知识点

什么是JDBC JDBC(Java DataBase Connectivity) 称为Java数据库连接&#xff0c;它是一种用于数据库访问的应用程序API&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;有了JDBC就可以用统一的语法对多种关系数据库进行访问&#xff0c;而不用担心其数据库操作语…...

git的实际操作

文章目录 删除GitHub上的某个文件夹克隆仓库到另一个仓库 删除GitHub上的某个文件夹 克隆仓库到另一个仓库 从原地址克隆一份裸板仓库 –bare创建的克隆版本库都不包含工作区&#xff0c;直接就是版本库的内容&#xff0c;这样的版本库称为裸版本库 git clone --bare ****(原…...

数据结构零基础C语言版 严蔚敏-线性表、顺序表

二、顺序表和链表 1. 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串...... 线性表在逻辑上是线性结构&#xff0c;…...

Keil uVision 5 MDK版软件安装包下载及安装教程(最详细图文教程)

目录 一.简介 二.安装步骤 软件&#xff1a;Keil uvision5版本&#xff1a;MDKv518语言&#xff1a;中文/英文大小&#xff1a;377.01M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.59GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接…...

单目3D目标检测[基于深度辅助篇]

基于深度辅助的方法 1. Pseudo-LiDAR Pseudo-LiDAR from Visual Depth Estimation: Bridging the Gap in 3D Object Detection for Autonomous Driving康奈尔大学https://zhuanlan.zhihu.com/p/52803631 首先利用DRON或PSMNET从单目 (Monocular)或双目 (Stereo)图像获取对应的…...

Ubuntu20.04下安装MySQL8环境

Ubuntu20.04下安装MySQL8环境 1.下载MySQL客户端和服务器2.配置MySQL3.测试MySQL4.设置MySQL服务开机自启动5.修改root密码MySQL数据库基本使用启动MySQL数据库服务重启MySQL数据库服务停止MySQL数据库服务查看MySQL运行状态设置MySQL服务开机自启动停止MySQL服务开机自启动MyS…...

html鼠标悬停图片放大

要在HTML中实现鼠标悬停时图片放大的效果&#xff0c;你可以使用CSS和JavaScript来完成。下面是一个简单的示例&#xff1a; 首先&#xff0c;创建一个HTML文档&#xff0c;包含一张图片和相应的CSS和JavaScript代码。 <!DOCTYPE html> <html lang"en">…...

基于hugging face的autogptq量化实践

1.量化并保存到本地的 #导入库&#xff1a; from transformers import AutoModelForCausalLM, AutoTokenizer, GPTQConfig model_id "facebook/opt-125m"quantization_config GPTQConfig(bits4,group_size128,dataset"c4",desc_actFalse, )tokenizer A…...

MySQL2:MySQL中一条查询SQL是如何执行的?

MySQL2&#xff1a;MySQL中一条查询SQL是如何执行的&#xff1f; MySQL中一条查询SQL是如何执行的&#xff1f;1.连接怎么查看MySQL当前有多少个连接&#xff1f;思考&#xff1a;为什么连接数是查看线程&#xff1f;客户端的连接和服务端的线程有什么关系&#xff1f;MySQL参数…...

C++入门01—从hello word!开始

1.第一个C程序 1.1 创建项目 第一次使用Visual Studio时&#xff1a; 1.2 创建文件 1.3 编写代码 编写第一个代码&#xff1a; #include<iostream> using namespace std; int main() {cout << "hello word!" << endl;system("pause"…...

Mingw下载---运行vscodeC++文件

下载 下载网址&#xff1a; https://sourceforge.net/projects/mingw-w64/files/mingw-w64/mingw-w64-release/ 翻到最下面&#xff0c;选择win64的安装&#xff1a; 下载完&#xff0c;解压到没有空格和中文字符的路径。不然在vscode中运行不了C代码。...

数据安全与PostgreSQL:最佳保护策略

在当今数字化时代&#xff0c;数据安全成为了企业不可或缺的一环。特别是对于使用数据库管理系统&#xff08;DBMS&#xff09;的组织来说&#xff0c;确保数据的完整性、保密性和可用性至关重要。在众多DBMS中&#xff0c;PostgreSQL作为一个强大而灵活的开源数据库系统&#…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...