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

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

news 2025/10/31 5:21:24

目录

  • 1、什么是v-model
  • 2、v-model实现原理
  • 3、实现示例
    • 3.1 实现text和textarea
    • 3.2 实现checkbox和radio
    • 3.3 实现select

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 本质上是一颗语法糖&#xff0c;可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数…...

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

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

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

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

抖音seo矩阵系统源码解析

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

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

6个ChatGPT4的最佳用途

文章目录 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 整个文件读入内存 直接将数据直接读取入内存&#xff0c;是效率最高的一种方式&#xff0c;但此种方式&#xff0c;仅适用于小文件&#xff0c;对于大文件&#xff0c;则不适合&#xff0c;因为比较浪费内存。 2.1 直接指定文化名读取 在 Go 1.16 开始&#xff0c;i…...

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

10 编码转换问题

文章目录 字符编码问题编码转换问题ANSI转UnicodeUnicode转ANSIUtf8转 ANSIutf8 转UnicodeANSI 转UTF-8Unicode 转 UTF-8 全部代码 字符编码问题 Windows API 函数 MessageBoxA:MessageBox 内部实现&#xff0c;字符串编码(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.关于“问题”的问题 一项研究计划可以围绕四个基本问题&#xff08;frequently asked questions,FAQ&#xff09;展开&#xff1a; 研究对象间的&#xff08;因果&#xff09;关系&#xff08;relationship of interest&#xff09; 这里更关注的是“因果关系”&#xff0c…...

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

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

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

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

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

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

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

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

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

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

maven与idea版本适配问题

maven与idea版本适配问题 1.版本对应关系——3.6.3 注意&#xff1a;针对一些老项目 还是尽量采用 3.6.3版本&#xff0c;针对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&#xff0c;而是帮助小白理清一些与ChatGPT相关的概念&#xff0c;并解释一些常见的问题。 概念 OpenAI: 一家人工智能公司&#xff0c;ChatGPT属于该公司的产品之一。前身是一个非盈利组织&#xff0c;不过目前已经转变为一家商业公司。 GPT: O…...

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

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

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

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

K-means

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

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

归并排序（基础+提升）

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

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

MATLAB应用

目录 网站 智能图像色彩缩减和量化 网站 https://yarpiz.com/ 智能图像色彩缩减和量化 使用智能聚类方法&#xff1a;&#xff08;a&#xff09;k均值算法&#xff0c;&#xff08;b&#xff09;模糊c均值聚类&#xff08;FCM&#xff09;和&#xff08;c&#xff09;自组织神…...

编程日记 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 添加事件监听方式一&#xff1a;addEventListener()&#xff08;推荐&#xff09;方式二&#xff1a;事件处理器属性方式三&#xff1a;内联事件处理器&#xff08;不推荐&#xff09; 移除监听器方…...

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

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

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/10/29 20:45:49

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/10/30 10:46:52

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/10/30 9:20:06

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/10/21 17:48:55

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/10/26 12:46:24

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/10/27 13:42:02

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/28 0:58:21

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/10/25 5:20:46