(笔记)解决select下拉框默认选中selected属性不起作用问题

在 vue3 中使用 HTML原生开发,想给 select 下拉框选中 selected 属性不起作用。这是因为 vue3中使用了 Composition API(组合式 api),而 Composition API 中的响应式数据是独立的,不会自动更新到 DOM 中。可以使用 v-model 来绑定下拉框的值(这种方法我也试过了,没什么卵用,使用 :v-model 才行)。

效果展示

1、使用 selected 时,即使使用了 v-model绑定了数据也没有效果。

也没有效果

2、使用 :v-model绑定,而不使用 selected 属性设置默认值时,默认选择第一个。

在没有使用 selected 属性设置默认值时默认选择第一个。

3、只有使用 selected 属性设置默认值,同时使用 :v-model 绑定数据时,会选择选定的哪个。

这样就会指定显示了。


好记性不如烂笔头,在学习路上留下痕迹。希望能给大家带来帮助,也期待您的点赞评论。若有不足之处,还请斧正。

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

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

相关文章

iPhone苹果相册视频怎么提取音频?

在数字时代,视频已成为我们记录生活、分享故事的重要方式。然而,有时候我们只想保留视频中的音频部分,比如一段动人的背景音乐或是一段珍贵的对话。那么,苹果相册视频怎么提取音频呢?本文将介绍三种简单且实用的方法&a…

若依实现图片上传时自动添加水印

文章目录 总体思路1. 修改通用上传方法2. 去除文件路径前两级目录3. 添加水印方法运行效果总结 为了解决图盗用,并有效保护图片版权,若依项目需要实现一个功能:上传图片时,自动在图片上添加水印。这不仅可以有效防止盗用&#xff…

ctfshow-web 151-170-文件上传

151. 我们首先想到就是上传一句话木马。但是看源代码限制了png。 (1)改前端代码。 这里是前端限制了上传文件类型,那我们就改一下就好了嘛,改成php。 这里直接修改不行,给大家推荐一篇简短文章,大家就会了&#xff08…

数据库同步中间件DBSyncer安装配置及使用

1、介绍 DBSyncer(英[dbsɪŋkɜː],美[dbsɪŋkɜː 简称dbs)是一款开源的数据同步中间件,提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景。支持上传插件自定义同步转换业务&#xf…

SpringBoot左脚进门之常用注解

类级别注解 SpringBootApplication Configuration //表明这是一个配置类 EnableAutoConfiguration //开启自动配置 ComponentScan() //开启组件扫描1、Configuration: 当一个类被 Configuration 注解…

CNCF云原生生态版图

CNCF云原生生态版图 概述什么是云原生生态版图如何使用生态版图 项目和产品(Projects and products)会员(Members)认证合作伙伴与提供商(Certified partners and providers)无服务(Serverless&a…

电子应用设计方案-50:智能牙刷系统方案设计

智能牙刷系统方案设计 一、引言 随着人们对口腔健康的重视程度不断提高,智能牙刷作为一种创新的口腔护理工具,能够更有效地帮助用户改善刷牙习惯和清洁效果。本方案旨在设计一款功能丰富、智能化程度高的智能牙刷系统。 二、系统概述 1. 系统目标 - 准…

遗传算法与深度学习实战(27)——进化卷积神经网络

遗传算法与深度学习实战(27)——进化卷积神经网络 0. 前言1. 自定义交叉算子2. 自定义突变操作符3. 进化卷积神经网络小结系列链接 0. 前言 DEAP toolbox 中提供的标准遗传操作符对于自定义的网络架构基因序列来说是不够的。这是因为任何标准的交叉算子…

希迪智驾持续亏损8.2亿:毛利率下滑,冲刺“自动驾驶矿卡第一股”

《港湾商业观察》黄懿 近日,希迪智驾(湖南)股份有限公司(下称“希迪智驾”)向港交所主板递交上市申请,联席保荐人为中金公司、中信建投国际、中国平安资本(香港)。 资料显示&#…

【0x0008】HCI_Create_Connection_Cancel命令详解

目录 一、命令概述 二、命令格式及参数说明 2.1. HCI_Create_Connection_Cancel 命令格式 2.2. BD_ADDR 三、返回事件及参数说明 3.1. HCI_Command_Complete 事件 3.2. HCI_Connection_Complete 事件 四、命令执行流程梳理 4.1. 命令发起 4.2. 命令接收与初步判断 4…

Elasticsearch Serverless 中的数据流自动分片

作者:来自 Elastic Andrei Dan 在 Elastic Cloud Serverless 中,我们根据索引负载自动为数据流配置最佳分片数量,从而使用户无需摆弄分片。 传统上,用户会更改数据流的分片配置,以处理各种工作负载并充分利用可用资源。…

Pytest-Bdd-Playwright 系列教程(15):背景(Background)

Pytest-Bdd-Playwright 系列教程(15):背景(Background) 前言一、什么是背景(Background)二、特性文件三、测试脚本四、运行测试总结 前言 在测试的过程中,我们往往会遇到这样的问题&…

Excel + Notepad + CMD 命令行批量修改文件名

注意:该方式为直接修改原文件的文件名,不会生成新文件 新建Excel文件 A列:固定为 renB列:原文件名称C列:修改后保存的名称B列、C列,需要带文件后缀,为txt文件就是.txt结尾,为png图片…

GESP202412 八级【排队】题解(AC)

》》》点我查看「视频」详解》》》 [GESP202412 八级] 排队 题目描述 小杨所在班级共有 n n n 位同学,依次以 1 , 2 , … , n 1,2,\dots,n 1,2,…,n 标号。这 n n n 位同学想排成一行队伍,其中有些同学之间关系非常好,在队伍里需要排在…

Ubuntu22.04 docker如何发布镜像(和用git差不多)

在dockerhub上创建远程仓库:https://hub.docker.com/ 将本地镜像打tag,并修改成可以上传到 dockerhub 的形式 # 查看本地镜像# 修改镜像 ## docker tag 镜像名称:标签 新的镜像名称(要和远程仓库dockerhub上的一致):新的标签pus…

C#中的string操作详解-截取、分割、连接、替换等

在C#中,string 类提供了许多用于操作字符串的方法,包括截取、分隔和连接等。以下是一些常用字符串操作的介绍和实例: 1. 截取字符串 Substring 方法 用于从字符串中截取子字符串。 语法: //从startIndex开始截取,…

26. Three.js案例-自定义多面体

26. Three.js案例-自定义多面体 实现效果 知识点 WebGLRenderer WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它支持 WebGL 渲染,并提供了多种配置选项。 构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选参数对象&…

【IC面试问题:UCIE PHY LSM AXI Cache】

IC面试问题:UCIE PHY LSM && AXI && Cache 1 UCIE PHY LSM有几种状态? 以及L1和L2这两种低功耗状态有什么区别?2 AXI的特性? 通道之间有依赖关系吗? master和slave的valid和ready关系? 写数…

PPT技巧:将幻灯片里的图片背景设置为透明

在PPT中添加了图片,想要将图片中的背景设置为透明或者想要抠图,有什么方法吗?今天分享两个方法。 方法一: 添加图片,选中图片之后,点击【图片格式】功能,点击最左边的【删除背景】 PPT会自动帮…

池化在深度学习中增强特征的作用

目录 ​编辑 引言 池化的基本作用与特征降维 池化的定义与目的 池化操作的实现 提取关键特征与计算效率的提升 池化对特征提取的影响 平均池化的应用 提高特征鲁棒性与过拟合的防止 池化对模型鲁棒性的贡献 池化防止过拟合的原理 增强多级特征与特征表达能力的提升…