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

v-model实现原理（一根绳上的蚂蚱）

news 2025/7/14 1:46:22

1、什么是v-model

v-model 本质上是一颗语法糖，可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
数据不仅能从data流向页面，还可以从页面流向data。
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
v-model只能应用在表单类元素（输入类元素）上。

2、v-model实现原理

v-model本质上只是一颗语法糖，真正的实现靠的还是v-bind和oninput事件。
- v-bind：绑定响应式数据
- 触发oninput 事件并传递数据
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

3、实现示例

3.1 实现text和textarea

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input type="text" placeholder="请输入内容" :value="info" @input="change"><textarea name="" id="" cols="30" rows="10" :value="info" @input="change"></textarea></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {this.info = e.target.value}}}).mount('#app')</script>
</body></html>

实现效果：

在这里插入图片描述

3.2 实现checkbox和radio

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input type="checkbox" :checked="info" @change="change"><input type="radio" :checked="info" @change="change" name="h"></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {console.log(e.target.checked);this.info = e.target.checked}}}).mount('#app')</script>
</body></html>

实现效果：

3.3 实现select

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><select name="" id="" :value="info" @change="change"><option value="江西">江西</option><option value="湖南">湖南</option><option value="北京">北京</option><option value="上海">上海</option></select></div><script>Vue.createApp({data() {return {info: ''}},methods: {change(e) {console.log(e.target.value);this.info = e.target.value}}}).mount('#app')</script>
</body></html>

实现效果：

v-model实现原理（一根绳上的蚂蚱）

目录 1、什么是v-model2、v-model实现原理3、实现示例3.1 实现text和textarea3.2 实现checkbox和radio3.3 实现select 1、什么是v-model v-model 本质上是一颗语法糖，可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数…...

编程日记 2023/6/28 16:24:54

第三章仅支持追加的单表内存数据库

第三章仅支持追加的单表内存数据库我们将从小处着手，对数据库施加很多限制。目前，它有如下限制： 支持两种操作：插入一行和打印所有行仅驻留在内存中（不需要持久化到磁盘） 支持单个硬编码表我们的硬…...

编程日记 2023/6/28 15:51:33

抖音seo矩阵系统源码解析

抖音SEO矩阵系统源码是一种用于优化抖音视频内容的工具，可以帮助用户提高抖音视频的搜索排名和流量，从而增加视频曝光和转化率。该系统包括两部分，即数据收集和分析模块以及SEO策略和实施模块。数据收集和分析模块主要负责从抖音平台上收集…...

编程日记 2023/6/28 15:18:11

文章目录 ChatGPT 4’s Current Limitations ChatGPT 4 的当前限制1. Crafting Complex Prompts 制作复杂的提示2. Logic Problems 逻辑问题3. Verifying GPT 3.5 Text 验证 GPT 3.5 文本4. Complex Coding 复杂编码5.Nuanced Text Transformation 细微的文本转换6. Complex Kn…...

编程日记 2023/6/28 14:44:49

go系列-读取文件

1 概述 2 整个文件读入内存直接将数据直接读取入内存，是效率最高的一种方式，但此种方式，仅适用于小文件，对于大文件，则不适合，因为比较浪费内存。 2.1 直接指定文化名读取在 Go 1.16 开始，i…...

编程日记 2023/6/28 14:11:28

10 编码转换问题

文章目录字符编码问题编码转换问题ANSI转UnicodeUnicode转ANSIUtf8转 ANSIutf8 转UnicodeANSI 转UTF-8Unicode 转 UTF-8 全部代码字符编码问题 Windows API 函数 MessageBoxA:MessageBox 内部实现，字符串编码(ANSI)转换成了Unicode,在调用MessageboxW MessageBox:…...

编程日记 2023/6/28 13:38:06

Spring MVC获取参数和自定义参数类型转换器及编码过滤器

目录一、使用Servlet原生对象获取参数 1.1 控制器方法 1.2 测试结果二、自定义参数类型转换器 2.1 编写类型转换器类 2.2 注册类型转换器对象 2.3 测试结果三、编码过滤器 3.1 JSP表单 3.2 控制器方法 3.3 配置过滤器 3.4 测试结果往期专栏&文章相关导读…...

编程日记 2023/6/28 13:04:45

理想的实验

1.关于“问题”的问题一项研究计划可以围绕四个基本问题（frequently asked questions,FAQ）展开： 研究对象间的（因果）关系（relationship of interest） 这里更关注的是“因果关系”&#xff0c…...

编程日记 2023/6/28 12:31:24

nginx配置开机启动（Windows环境）

文章目录 1、下载nginx，并解压2、配置nginx.conf，并启动Nginx3、开机自启动 1、下载nginx，并解压 2、配置nginx.conf，并启动Nginx 两种方法： 方法一：直接双击nginx.exe，双击后一个黑色弹窗一闪…...

编程日记 2023/6/28 11:58:03

MySQL 基础面试题02（事务索引）

1.什么是 MySQL 事务？ MySQL 事务是指一组操作，是一个不可分割的工作单位，可以确保一组数据库操作要么全部执行，要么全部不执行。换句话说，事务是 MySQL 中保证数据一致性和完整性的机制。在 MySQL 中，事…...

编程日记 2023/6/28 11:24:42

主从架构lua脚本-Redis（四）

上篇文章介绍了rdb、aof持久化。持久化RDB/AOF-Redis（三）https://blog.csdn.net/ke1ying/article/details/131148269 redis数据备份策略写job每小时copy一份到其他目录。目录里可以保留最近一个月数据。把目录日志保存到其他服务器，防止机…...

编程日记 2023/6/28 10:51:21

maven与idea版本适配问题

maven与idea版本适配问题 1.版本对应关系——3.6.3 注意：针对一些老项目还是尽量采用 3.6.3版本，针对idea各个版本的兼容性就很兼容 0.IDEA 2022 兼容maven 3.8.1及之前的所用版本 1.IDEA 2021 兼容maven 3.8.1及之前的所用版本 2.IDEA 2020 兼容Mave…...

编程日记 2023/6/28 10:18:00

ChatGPT扫盲知识库

本文并不是教你如何使用ChatGPT，而是帮助小白理清一些与ChatGPT相关的概念，并解释一些常见的问题。概念 OpenAI: 一家人工智能公司，ChatGPT属于该公司的产品之一。前身是一个非盈利组织，不过目前已经转变为一家商业公司。 GPT: O…...

编程日记 2023/6/28 9:44:39

chatgpt赋能python：Python轨迹可视化：用数据讲故事

Python轨迹可视化：用数据讲故事介绍随着物联网、智能城市等领域的发展，越来越多的数据被收集下来并存储在数据库中。这些数据对于决策者来说是非常重要的，但是如何将这些数据进行展示和分析呢？这时候Python轨迹可视化就可以派…...

编程日记 2023/6/28 9:11:18

K-means

K-means 主要缺点：对于高维度数据，用kmeans方法可能会受到数据形态的影响，其假设高维数据呈球形分布。...

编程日记 2023/6/28 8:37:57

归并排序（基础+提升）

目录归并排序的理论知识归并排序的实现 merge函数递归实现递归改非递归归并排序的性能分析题目强化题目一：小和问题题目二：求数组中的大两倍数对数量题目三：LeetCode_327. 区间和的个数归并排序的理论知识归并排序&…...

编程日记 2023/6/28 8:04:36

MATLAB应用

目录网站智能图像色彩缩减和量化网站 https://yarpiz.com/ 智能图像色彩缩减和量化使用智能聚类方法：（a）k均值算法，（b）模糊c均值聚类（FCM）和（c）自组织神…...

编程日记 2023/6/28 7:31:13

LeetCode --- 1784. Check if Binary String Has at Most One Segment of Ones 解题报告

Given a binary string s without leading zeros, return true if s contains at most one contiguous segment of ones. Otherwise, return false. Example 1: Input: s = "1001" Output: false Explanation: The ones do not form a contiguous s…...

编程日记 2023/6/28 6:57:52

js：javascript中的事件体系：常见事件、事件监听、事件移除、事件冒泡、事件捕获、事件委托、阻止事件

参考资料事件介绍Element事件目录常见的事件鼠标事件键盘事件Focus events 添加事件监听方式一：addEventListener()（推荐）方式二：事件处理器属性方式三：内联事件处理器（不推荐） 移除监听器方…...

编程日记 2023/6/28 6:24:31

【数据结构】特殊矩阵的压缩存储

🎇【数据结构】特殊矩阵的压缩存储🎇 🌈 自在飞花轻似梦,无边丝雨细如愁 🌈 🌟 正式开始学习数据结构啦~此专栏作为学习过程中的记录🌟 文章目录 🎇【数据结构】特殊矩阵的压缩存储&#x1f38…...

编程日记 2023/6/28 5:51:10

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/6/20 17:53:24

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/7/13 17:36:56

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

P3 QT项目----记事本（3.8）

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/12 22:52:28