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

006-v-model原理

news 2025/11/19 15:28:04

v-model原理

  • 简介
  • v-model应用在输入框上
  • v-model应用在组件上

简介

由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。
应用在组件上由 props: {value: xxx } ，this.$emit(‘input’, xxx ) 完成。

v-model应用在输入框上

<body><div id="app"><input type="text" v-model="msg"><!-- 等同于 --><input type="text" :value="msg1" @input="msg1 = $event.target.value"><div>{{ msg }}</div><div>{{ msg1 }}</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {msg: '123',msg1: 'abc',},methods: {},computed: {},});</script>
</body>
  1. 数据更新时，需要页面同步更新：Vue属性绑定实现；
  2. 页面更新时，需要数据同步更新：监听input事件实现；

v-model应用在组件上

<body><div id="app"><div>v-model 父组件：{{modelInputText}}</div><component-model v-model="modelInputText"></component-model></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 注册全局组件Vue.component('component-model', {template: `<div><input type="text" :value="value" @input="updateVal" /><br /><span>v-model的子组件：{{value}}</span></div>`,props: ['value'],data: function () {return {text: 'componentOneText'}},methods: {updateVal(event) {this.$emit('input', event.target.value);}}})var app = new Vue({el: '#app',data: {modelInputText: 'hello v-model !',},methods: {},computed: {},});</script>
</body>
  1. 数据更新时，需要父组件同步更新：this.$emit(‘input’, xxx )；
  2. 父组件更新时，需要子组件同步更新：props: {value: xxx }；

相关文章：

006-v-model原理

v-model原理 简介v-model应用在输入框上v-model应用在组件上 简介 由 属性绑定(v-bind:value“searchText”) 配合 input事件监听(v-on:input“searchText event.target.value”) 实现。 应用在组件上由 props: {value: xxx } &#xff0c;this.$emit(‘input’, xxx ) 完成。…...

编程日记 2024/3/10 3:28:34

Ubuntu下使用DAPLink（OpenOCD）

目录 1. 下载OpenOCD源代码 2. 编译代码 2.1 运行bootstrap 2.2 安装关联库 2.3 运行./configure 2.4 运行make 2.5 运行sudo make install 3. 烧录程序 3.1 挂起MCU 3.2 写入镜像 3.3 校验镜像 通过OpenOCD实现&#xff0c;在Ubuntu18 64bit下验证。 1. 下载OpenOC…...

编程日记 2024/3/10 3:26:32

C# 中 Math.Round 数学函数

在 C# 中&#xff0c;Math.Round 是一个数学函数&#xff0c;用于对一个浮点数进行四舍五入操作。它接受一个浮点数作为输入&#xff0c;并返回一个最接近输入值的整数或指定小数位数的浮点数。 Math.Round 方法有多个重载&#xff0c;其中最常用的重载有以下两种形式&#xf…...

编程日记 2024/3/10 3:23:30

力扣---接雨水---单调队列

题目&#xff1a; 单调队列思想&#xff1a; 没有思路的小伙伴可以先把这个想清楚哦&#xff1a;力扣hot10---大根堆双端队列-CSDN博客 从上面的图就可以发现&#xff0c;如果柱子呈递减序列&#xff0c;那么不会接到雨水&#xff0c;只要有一个小凸起柱子&#xff0c;那么这个…...

编程日记 2024/3/10 3:22:29

微分学＜4＞——微分中值定理

索引 微分中值定理极值定义4.1 极大(小)值定理4.1 Fermat引理定理4.2 Rolle定理 Lagrange中值定理定理4.3 Lagrange中值定理定理4.4 Cauchy中值定理 导数对函数性质的刻画Jensen不等式 微分中值定理 极值 定义4.1 极大(小)值 若存在 x 0 x_{0} x0​的邻域 U ( x 0 , δ ) U\…...

编程日记 2024/3/10 3:21:28

FPGA的时钟资源

目录 简介 Clock Region详解 MRCC和SRCC的区别 BUFGs 时钟资源总结 简介 7系列FPGA的时钟结构图&#xff1a; Clock Region&#xff1a;时钟区域&#xff0c;下图中有6个时钟区域&#xff0c;用不同的颜色加以区分出来 Clock Backbone&#xff1a;从名字也能看出来&#x…...

编程日记 2024/3/10 3:20:27

LeetCode27: 移除元素

题目描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…...

编程日记 2024/3/10 3:19:26

Python使用Beautiful Soup及解析html获取元素并提取内容值

Python使用Beautiful Soup及解析html获取元素并提取内容值 1. 包括解析获取标题2. 根据标签及id获取所有元素3. 根据标签及class获取所有元素4. 获取元素下的标签的值5. 获取元素下的parent及child的元素的值参考 1. 包括解析获取标题 2. 根据标签及id获取所有元素 3. 根据标…...

编程日记 2024/3/10 3:18:25

如何清除keep-alive缓存

在 Vue.js 中&#xff0c;使用 <keep-alive> 组件可以将组件保留在内存中&#xff0c;以避免重复渲染和销毁&#xff0c;从而提高性能。如果需要手动清除 <keep-alive> 组件的缓存&#xff0c;可以通过两种方法来实现&#xff1a; 通过 $destroy 方法销毁组件&…...

编程日记 2024/3/10 3:17:23

2024年新手视频剪辑软件推荐-6款视频剪辑软件测评

视频剪辑软件推荐 premiere premiere 直达地址:各大软件网站 说到底,还是得专业的来,虽然很多人觉得他是收费的,但是你懂的,想要免费总是会有办法的.别的不说,剪辑这块,我还是很认可这个软件,虽然我现在还是刚入门. 剪映 剪映 抖音官方推出的一款手机视频编辑剪辑应用,提供切割…...

编程日记 2024/3/10 3:16:22

无货源抖店可以做吗？那些月入上万是真的吗？分享我的成功秘籍

大家好&#xff0c;我是电商花花。 现在还是有人在不停的在问&#xff0c;抖音小店无货源还可以做吗&#xff1f;那些月入上万都是真的吗&#xff1f; 当然是真的&#xff0c;而且做抖音小店非常简单&#xff0c;前提是你真的完全掌握到核心玩法&#xff0c;且要有执行力。 …...

编程日记 2024/3/10 3:15:21

文献阅读：DEA-Net：基于细节增强卷积和内容引导注意的单图像去雾

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;DEA-Net&#xff1a;基于细节增强卷积和内容引导注意的单图像去雾1、研究背景2、方法提出3、相关知识3.1、DEConv3.3、多重卷积的…...

编程日记 2024/3/10 3:13:18

2024想要赚点小钱真的很容易！帮你们找的10个搞钱第二职业

我们都希望在空闲时间里增加一些额外收入&#xff0c;并有机会找到自己热爱的事业&#xff0c;每天贝兼几十上百元是一个不错的开始&#xff0c;小钱也是钱&#xff0c; 搞钱的经验会积少成多。今天分享10个搞钱第二职业&#xff0c;2024想要赚点小钱真的很容易。 一.摆摊卖花 …...

编程日记 2024/3/10 3:12:17

【Linux网络】再谈 “协议“

目录 再谈 "协议" 结构化数据的传输 序列化和反序列化 网络版计算器 封装套接字操作 服务端代码 服务进程执行例程 启动网络版服务端 协议定制 客户端代码 代码测试 使用JSON进行序列化与反序列化 我们程序员写的一个个解决我们实际问题&#xff0c;满…...

编程日记 2024/3/10 3:11:17

猫头虎分享已解决Bug || 系统监控故障：MonitoringServiceDown, MetricsCollectionError

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …...

编程日记 2024/3/10 3:09:15

Java中的基本数据类型有哪些

在Java编程语言中&#xff0c;基本数据类型&#xff08;Primitive Types&#xff09;是预定义的数据类型&#xff0c;它们不是由用户定义的类创建的&#xff0c;而是由语言本身提供的。这些基本数据类型是构成Java程序的基础&#xff0c;用于存储不同类型的值&#xff0c;如整数…...

编程日记 2024/3/10 3:07:13

二叉树遍历（前中后序的递归/非递归遍历、层序遍历）

二叉树的遍历 1. 二叉树的前序、中序、后序遍历 前、中、后序遍历又叫深度优先遍历 注&#xff1a;严格来说&#xff0c;深度优先遍历是先访问当前节点再继续递归访问&#xff0c;因此&#xff0c;只有前序遍历是严格意义上的深度优先遍历 首先需要知道下面几点&#xff1a; …...

编程日记 2024/3/10 3:05:12

UE4升级UE5 蓝图节点变更汇总（4.26/27-5.2/5.3）

一、删除部分 Ploygon Editing删除 Polygon Editing这个在4.26、4.27中的插件&#xff0c;在5.1后彻底失效。 相关的蓝图&#xff0c;如编辑器蓝图 Generate mapping UVs等&#xff0c;均失效。 如需相关功能&#xff0c;请改成Dynamic Mesh下的方法。 GetSupportedClass删…...

编程日记 2024/3/10 3:02:08

【python】异常处理

前言 省略各种废话&#xff0c;直接快速整理知识点 try-except 基础 作用 程序不可能永远都是对的&#xff0c;当7除a&#xff0c;a由用户输入时&#xff0c;用户输入0就会报错。try-except就是解决这些问题。 结构 多分支自定义错误类型 上方的exception是一个错误类型…...

编程日记 2024/3/10 3:01:07

【xv6操作系统】Lab systems calls

一、实验前须知 阅读 xv6 文档的第 2 章和第 4 章的 4.3 节和 4.4 节以及相关源文件&#xff1a; 系统调用的用户空间代码在 user/user.h 和 user/usys.pl 中。 内核空间代码在 kernel/syscall.h 和 kernel/syscall.c 中。 与进程相关的代码在 kernel/proc.h 和 kernel/proc.c…...

编程日记 2024/3/10 3:00:06

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/11/4 22:16:08

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/11/16 21:56:54

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/11/16 23:58:36

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2025/11/19 6:49:21

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/11/19 15:02:39

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06

深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

编程新知 2025/10/31 9:08:31

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

编程新知 2025/11/16 23:31:38