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

news2024/12/13 14:37:28

在 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.coloradmin.cn/o/2258824.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

国科大智能设备安全-APK逆向分析实验

APK逆向分析实验 使用APK常用逆向分析工具,对提供的移动应用程序APK文件进行逆向分析,提交逆向后代码和分析报告。具体任务如下: 任务一:安装并熟悉Apktool、Jadx等APK常用逆向工具的使用方法,对提供的Facebook Updat…

黑皮书-计算机科学导论02

目录 第二部分:计算机硬件 第5章计算机组成 5.1中央处理单元 Ⅰ.算数逻辑单元 Ⅱ.控制单元 Ⅲ.寄存器 5.2主存储器 Ⅰ.随机存取存储器(RAM) Ⅱ.只读存储器(ROM) 高速缓冲存储器(Cache) 5.3输入/输出子系统 Ⅰ.非存储设备 Ⅱ.存储设备(辅助存…

解决Linux安装yum时出现apt-get install E: 无法定位软件包问题

ubuntu系统安装mysql之前安装yum,出现报错:E: 无法定位软件包问题 (1)找到源镜像,备份 cd /etc/apt/ // 切换到/etc/apt/ 目录下 sudo cp sources.list sources.list.old // 先把源文件…

[工具升级问题] 钉钉(linux版)升级带来的小麻烦

本文由Markdown语法编辑器编辑完成。 1. 背景: 今日钉钉又发布了新的升级版本。由于我工作时使用的是Ubuntu 20.04版本,收到的升级推送信息是,可以升级到最新的7.6.25-Release版本。根据钉钉官方给出的历次更新版说明,这个新的版本&#xf…

UnityShaderLab 实现黑白着色器效果

实现思路:取屏幕像素的RGB值,将三个通道的值相加,除以一个大于值使颜色值在0-1内,再乘上一个强度值调节黑白强度。 在URP中实现需要开启Opaque Texture ShaderGraph实现: ShaderLab实现: Shader "Bl…

python学习笔记—8—数字精度控制

1. %m.nd %m.nf score 100 print("socre %5d"% score) salary 6.66 print("salary %4.2f" % salary)

TMGM平台怎么样?全面解析TMGM

在选择多资产交易平台时,投资者需要综合考虑多个因素,包括平台的安全性、交易条件、客户服务等。TMGM(TradeMax Global Markets)作为一家成立于2013年的平台,在外汇、股指、商品、加密货币等多个市场领域提供交易服务。…

Spring Boot 配置多数据源并手动配置事务

Spring Boot 配置多数据源并手动配置事务 一、为什么多数据源需要手动配置?二、配置多数据源1. 数据源配置类 (DataSourceConfig)2. 主数据库 MyBatis 配置类 (PrimaryDbMyBatisConfig)3. 从数据库 MyBatis 配置类 (SecondaryDbMyBatisConfig)4. application.yml 配…

微积分复习笔记 Calculus Volume 2 - 3.6 Numerical Integration

3.6 Numerical Integration - Calculus Volume 2 | OpenStax

axios请求之参数拼接

URL 查询参数传递数据 优点: 简洁性: URL 查询参数的方式比较简洁,适合传递少量的数据。缓存友好: 查询参数可以被浏览器缓存,适合 GET 请求,但对于 POST 请求,浏览器通常不会缓存。 缺点: 数据大小限制: U…

使用硬约束的物理信息神经网络(PINNs,Physics-Informed Neural Networks)求解一维泊松方程

背景 一维泊松方程定义为: u ′ ′ ( x ) f ( x ) u(x) f(x) u′′(x)f(x),边界条件为 x 0 x0 x0 和 x 1 x1 x1 处, u ( x ) 0 u(x) 0 u(x)0,其中, f ( x ) − π 2 sin ⁡ ( π x ) f(x) -\pi^2 \sin(\pi …

基于单片机的多功能函数信号发生器的设计(论文+源码)

系统总体设计思路 在本次课题为信号发生器,其系统整体架构如图2.1所示,在硬件结构上,其主要包括核心控制器AT89C51单片机,液晶显示器LCD1602,数模转换器DAC0832,运算放大器L358以及按键、LED指示灯等器件,…

Docker 安装 sentinel

Docker 安装系列 1、拉取 [rootTseng ~]# docker pull bladex/sentinel-dashboard Using default tag: latest latest: Pulling from bladex/sentinel-dashboard 4abcf2066143: Pull complete 1ec1e81da383: Pull complete 56bccb36a894: Pull complete 7cc80011dc6f: Pull…

解读数据资产管理实践白皮书(5.0版)深入学习掌握数据资产管理知识体系。

本文介绍了数据资产管理的重要性及其概述,详细阐述了数据资产管理的活动职能包括数据模型管理、数据标准管理、数据质量管理等,并强调了数据安全管理的重要性。文章还讨论了数据资产管理的保障措施和实践步骤,以及发展趋势和总结展望。 重点内…

【大前端vue:组件】vue鼠标滑动:平滑滚动效果 向左、向右

【大前端vue&#xff1a;组件】vue鼠标滑动&#xff1a;平滑滚动效果 向左、向右 <template><div class"tab-container"><div class"tab-wrapper"><h2 class"main-title">鼠标滑动&#xff1a;平滑滚动效果 向左、向右…

python脚本:向kafka数据库中插入测试数据

# coding:utf-8 import datetime import json import random import timefrom kafka import KafkaProducer生产者demo向branch-event主题中循环写入10条json数据注意事项&#xff1a;要写入json数据需加上value_serializer参数&#xff0c;如下代码producer KafkaProducer(val…

selenium自动爬虫工具

一、介绍selenium爬虫工具 selenium 是一个自动化测试工具&#xff0c;可以用来进行 web 自动化测试、爬虫 selenium 本质是通过驱动浏览器&#xff0c;完全模拟浏览器的操作&#xff0c;比如跳转、输入、点击、下拉等&#xff0c;来拿到网页渲染之后的结果&#xff0c;可支持…

【数据结构——栈与队列】环形队列的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现环形队列的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化队列、销毁队列、判断队列是否为空、进队列…

笔记本电脑升级硬盘存储、Windows10系统安装及后续步骤(以联想ThinkPad X1 Carbon Gen10为例)

文章目录 1.前言2.材料准备3.Win10系统安装盘制作3.1 系统下载3.2 系统启动U盘刻录 4.拆机更换硬盘5.开机启动项修改6.系统安装&#xff08;以Win10为例&#xff09;7.系统安装后可能需要的步骤7.1 缺少WIFI等网络驱动7.2 系统激活7.3 办公软件安装 8.旧硬盘变废为宝参考文献 1…

关于idea-Java-servlet-Tomcat-Web开发中出现404NOT FOUND问题的解决

在做web项目时&#xff0c;第一次使用servlet开发链接前端和后端的操作&#xff0c;果不其然&#xff0c;遇到了诸多问题&#xff0c;而遇到最多的就是运行项目打开页面时出现404NOT FOUND的情况。因为这个问题我也是鼓捣了好久&#xff0c;上网查了许多资料才最终解决&#xf…