微信小程序使用picker,数组怎么设置默认值

news/2024/10/4 11:09:22 标签: 微信小程序, notepad++, 小程序
默认先显示请选择XXX。然后点击弹出选择列表。如果默认value是0的话,他就直接默认显示数组的第一个了。

<picker mode="selector" :value="planIndex" :range="planStatus" range-key="label" @change="bindPlanChange">
  <view class="picker flex-row-space-between">
    <text class="status">{{ planIndex!='' ? planStatus[planIndex]?.label : '请选择' }}</text>
  </view>
</picker>
const planIndex=ref('');//试了默认给了-1.结果点开选项列表第一个之前多了一个空的选项。改成空字符。点开就是正确的。
const planStatus = reactive([
  { label: "生效", value: 0 },
  { label: "完结", value: 1 },
  { label: "中断", value: 2 },
]);
const bindPlanChange=(e)=>{
  planIndex.value=e.detail.value;
}

planIndex是选中的下标。默认如果数组没有-1.你让他默认等于-1以达到显示请选择的字样。结果就会导致弹框变成这样的状态。 


http://www.niftyadmin.cn/n/5689851.html

相关文章

maven安装本地jar包到本地仓库

有时候我们需要把本地的 jar 包 install 到本地的 maven 仓库&#xff0c;这时就需要手动install依赖项。例如&#xff0c;把下面的 zhdx-license-1.0.jar 安装到本地 maven 仓库的操作如下&#xff1a; <dependency><groupId>com.zhdx</groupId><artifa…

ipv6和ipv4的区别

IPv6&#xff08;Internet Protocol Version 6&#xff09;和IPv4&#xff08;Internet Protocol Version 4&#xff09;是目前互联网上使用最广泛的两种IP协议。它们之间存在显著的差异&#xff0c;以下是对这些差异的具体分析&#xff1a; 一、地址长度与表示方法 IPv4&…

深入解析 GPT 系列模型:核心原理、应用与未来发展

1. 引言 1.1 GPT 系列模型概述 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是由 OpenAI 开发的一类生成式预训练语言模型。基于 Transformer 架构&#xff0c;GPT 模型具备强大的自然语言处理能力&#xff0c;能够通过自回归方式生成文本。自首次推出以来…

【Golang】Go语言中时间time相关处理方法

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

SOMEIP_ETS_150: SD_Send_triggerEventUINT8Multicast_Eventgroup_6

测试目的&#xff1a; 验证DUT在Tester订阅事件组后&#xff0c;能够响应Tester触发的triggerEventUINT8Multicast方法&#xff0c;并将TestEventUINT8Multicast事件发送到订阅请求中端点选项指定的IP地址和端口。 描述 本测试用例旨在确保DUT能够正确处理事件组的订阅请求&…

QML 模块划分与导入机制详解

在 QML 中&#xff0c;模块是 Qt 框架中至关重要的组成部分。理解模块的划分和导入机制对于开发高效、可维护的 QML 应用至关重要。本文将详细解释 QML 模块的独立性、导入规则&#xff0c;以及如何通过明确的导入语句灵活使用不同模块的功能。 1. QML 中的模块是什么&#xf…

C或C++判断指针是否指向同一块内存

有时需要判断指针是否指同一块内存&#xff0c;例如设计字符串时&#xff1a; &#xff08;1&#xff09;insert函数 &#xff08;2) replace函数 &#xff08;3&#xff09;assign函数 难点是迭代器&#xff0c;判断是否同一个迭代器时&#xff0c;需要你在设计迭代器时加…

华为资源分享

紫光云文档中心提供弹性计算服务文档https://www.unicloud.com/document/product/ElasticComputeService/index.html报文格式华为报文格式资料Info-Finder&#xff08;在线工具&#xff09; 报文格式华为IP网络电子书华为IP网络相关电子书IP网络系列丛书 - 华为企业业务华为产品…