【Vue原理】VModel - 源码版 之 select 详解

最新推荐文章于 2024-01-22 16:53:51 发布
最新推荐文章于 2024-01-22 16:53:51 发布
阅读量882 收藏 1
点赞数
分类专栏： Vue原理 文章标签： vue 前端 前端框架 javascript 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27460969/article/details/94383091
版权
本文深入探讨Vue如何处理select元素的v-model，重点在于Vue如何设置和更新selectedIndex。通过分析源码，揭示Vue在inserted和componentUpdated钩子中对select的处理，以及在options和绑定值变化时的逻辑。文章举例说明了多种情况下的行为，包括当选项值重复、选项变更等情况。
摘要由CSDN通过智能技术生成

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】VModel - 源码版 之 select 详解

今天我们来看看 v-model 处理 select 有什么特殊的地方

前面已经有三篇说明VModel了

【Vue原理】VModel - 白话版

【Vue原理】VModel - 源码版 之 表单元素绑定流程

【Vue原理】VModel - 源码版之input详解

通过第一篇源码分享，我们就知道 Vue是通过 设置 select 的 selectedIndex 来控制选项的，

哈哈，现在我们就是来分析到底是怎么设置 selectedIndex 的

好的，我们一定要带着问题进行学习，这样学完才有用

1、Vue 如何设置 selectedIndex

2、Vue 在哪里设置 selectedIndex

Vue 如何设置 selectedIndex

Vue 是通过 一个 setSelected 的方法专门来设置 selectedIndex 的，我们来看下源码

最低0.47元/天 解锁文章
神仙朱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中v-model对select的绑定操作
10-14
主要介绍了vue中v-model对select的绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js：v-model结合select类型
零小唬的博客
12-07 482
vue.js：v-model结合select类型
v-model-select
qinqinde123的博客
09-05 95
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 单选框 --> <select v-model="fruit"> <option value="苹果">苹果</op
vue中v-model详解
09-16 1290
vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@i...
Vue.js——v-model结合select类型——2020.11.22
weixin_43402353的博客
11-22 579
一丶v-model：select 和checkbox一样，select也分单选和多选两种情况 单选：只能选中一个值 v-model绑定的是一个值 当我们选中option中的一个时，会将它对应的value赋值到mySelect中 多选：可以选中多个值 v-model绑定的是一个数组 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中 二丶代码实战 <!--作者：key--> <!--浏览工具：Chrome--> <!--开发工具
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
详解如何解决Vue和vue-template-compiler版本之间的问题
10-18
主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-simple-uploader for vue3源码
04-22
Vue3大文件分片上传是现代Web...总之，`vue-simple-uploader for vue3源码`是实现Vue3应用程序中大文件分片上传的一个重要工具。通过深入研究源码，开发者可以了解其内部工作原理，进而优化和扩展组件以满足特定需求。
vue-bootstrap-select：引导选择的vue版本
02-05
@ alfsnd / vue-bootstrap-select Vue版本 演示版 安装 npm install @alfsnd/vue-bootstrap-select --save 用法 import VSelect from '@alfsnd/vue-bootstrap-select' export default { name : 'app' , ...
v-module在select中的使用
最新发布
HWL5679的博客
01-22 1363
在select下拉选择框中，v-model用于绑定一个数组或对象，而不是一个具体的值。
vue.js 解决v-model让select默认选中不生效的问题
11-20
笔者今天在开发中遇到一个看起来很神奇的问题，平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中，今天无论如何都选不中，后来经过很久的复查和大神的一句话终于解决这个这个问题，顺便分享一下。 问题 先上代码： 上图是前端的H5页面 下面是js代码： 一眼看上好像也没有什么问题。js 在初始化的时候，调用后台接口，取到数据然后传递给vue里面定义的data里面。并且前端页面除了select不能正常选中，其他的input 框的数据也都全部显示出来了（因为涉及一些机密的数据，所以还是涂鸦一下，主要还是把问题说清楚） 按照常理来说是不可能出现这个问题，毕竟之前在
v-model结合select使用
xiaocmianju的博客
05-26 238
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- v-model结合select可以单选也可以多选。 --> <!-- select单选 --> <select na
Vue中select下拉框搭配v-model -- 转载
热门推荐
有一颗前端心的后端开发小哥
10-05 1万+
Vue中select下拉框搭配v-model -- 转载第一种是option的值写在HTML中第二种是option 选项内容写在JS中的，通过v-for来遍历的：第三种是option 选项内容 通过接口去获取 但是接口里没有默认选中项怎么办呢？看代码 在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。 select下拉框在界面的展示，我们都希望看到框中有一个值 而不是空白，比如显示 “请选择” 或者 “全部” 的默认值。 关于select选项的写
v-model与select
零小唬的博客
11-30 316
v-model与select
Vue中v-model的使用
acx0000的博客
07-28 553
可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。......
vue中 select的v-model简单应用
reembarkation的博客
06-30 1571
vue中 select使用v-model绑定，并设置动态下拉项
v-model结合select的使用
qq_41138726的博客
11-16 587
1.下面是选择一个和选择多个的时候的情况 <body> <div id="app"> <!-- 选择一个 --> <select name="abc" id="" v-model="fruit" > <option value="苹果" >苹果</option> <option value="香蕉" >香蕉</option&gt
vue-monoplasty-slide-verify插件详解
05-30
vue-monoplasty-slide-verify 是一个基于 Vue.js 的滑动验证组件，用于进行用户身份验证。它提供了一个简单易用的滑动验证界面，支持自定义样式和文案，还可以通过事件来获取验证结果。 使用 vue-monoplasty-slide-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值