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

数据双向绑定v-modal

news 2026/3/26 22:03:40

v-model

v-model就实现了双向数据绑定，实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件，在父组件使用v-on来监听对应的事件并修改相应的数据。
input的v-model就是通过<input :value="value" @input="input"/>

封装一个input组件，v-model实现

两个注意点：

假设不是使用的value属性和input事件，而是使用string属性和strChange事件。通过mode属性设置
爷父孙组件，父组件通过computed实现

// 父组件
<my-input v-model="value"></my-input>// my-input子组件组件
<template><!-- 2. 监听 input 事件的出发 --><div class="input" contenteditable @input="input"></div>
</template><script>
export default {// 1. 接受父级传递的值props: {value: {type: String,default: ''}},methods: {// 3. 编写 input 事件触发执行的事件处理函数input (event) {// 4. $emit input 事件，并将 event.target.innerText 作为参数this.$emit('input', event.target.innerText)}}
}
</script>

原生实现数据双向绑定

<body><span id="text"></span><input id="value" />
</body>
<script>
window.onload = function() {let input = document.getElementById('value')let text = document.getElementById('text')let data = { value: '' }input.value = data.valuetext.innerHTML = data.value// 数据劫持Object.defineProperty(data, 'value', {set: function (val) {input.value = valtext.innerHTML = val},get: function () {return input.value}})input.addEventListener('keyup', function (){data.value = input.value})
}
</script>

相关文章：

数据双向绑定v-modal

v-model v-model就实现了双向数据绑定&#xff0c;实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件&#xff0c;在父组件使用v-on来监听对应的事件并修改相应的数据。 input的v-model就是通过<input :value"value" input"input"…...

编程日记 2024/2/2 23:39:30

Docker 容器jar 运行报错 at sun.awt.FontConfiguration.getVersion 解决方法

docker jar 运行报错 at sun.awt.FontConfiguration.getVersion 初步判断是在运行 Docker 容器中的 JAR 文件时遇到了与字体配置相关的问题。这个问题可能是由于容器内缺少字体配置或字体文件而引起的。 要解决这个问题&#xff0c;你可以尝试以下方法&#xff1a; 1.安装字…...

编程日记 2024/2/2 23:38:29

光学3D表面轮廓仪服务超精密抛光技术发展

随着技术的不断进步&#xff0c;精密制造领域对材料表面的处理要求越来越高&#xff0c;超精密抛光技术作为当下表面处理的尖端技术&#xff0c;对各种高精密产品的生产起到了至关重要的作用&#xff0c;已广泛应用于集成电路制造、医疗器械、航空航天、3C电子、汽车、精密模具…...

编程日记 2024/2/2 23:37:28

详解C++中auto关键字

auto关键字 auto关键字(C11)类型别名思考auto简介auto的使用细则auto与指针和引用结合起来使用在同一行定义多个变量 auto不能推导的场景1.auto不能作为函数的参数2.auto不能直接用来声明数组 auto关键字(C11) 类型别名思考 随着程序越来越复杂&#xff0c;程序中用到的类型也…...

编程日记 2024/2/2 23:31:23

24.云原生ArgoCD高级之数据加密seale sealed

云原生专栏大纲 文章目录 数据加密之seale sealedBitnami Sealed Secrets介绍Bitnami Sealed Secrets工作流程安装sealed-secrets和kubeseal安装sealed-secrets-controller安装kubeseal通过kubeseal将sealed-secrets公钥拿出来通过kubeseal加密secrets替换kustomize下secret为…...

编程日记 2024/2/2 23:30:21

线性代数：线性方程组

目录 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理...

编程日记 2024/2/2 23:29:20

标准的排序组合-算法

题目 有若干个字母&#xff0c;要求计算出长度为4的所有可能得组合 解题 排序组合最适用的就是回溯了&#xff0c;建议大家本地debug一层一层的看能好理解点 private static void getResult(List<String> source, Stack<String> temp, int curLength, int maxL…...

编程日记 2024/2/2 23:26:18

2402C++,C++递归取各种节点名字

参考 explicit FindNamedClassVisitor(ASTContext *Context) : Context(Context) {}元<类 T>极 动作(T&e){串 ae->getQualifiedNameAsString();d.加(a);中 真;} bool VisitCXXRecordDecl(CXXRecordDecl *e) {中 动作(e);} bool VisitFunctionDecl(FunctionDecl*e…...

编程日记 2024/2/2 23:24:16

Qt 5.9.4 转 Qt 6.6.1 遇到的问题总结（三）

1.QSet: toList 中的toList 函数已不存在&#xff0c;遇到xx->toList改成直接用&#xff0c;如下&#xff1a; 2.开源QWT 图形库中QwtDial中的 setPenWidth 变成 setPenWidthF函数。 3.QDateTime 中无setTime_t 改为了setSecsSinceEpoch函数。 4.QRegExp 类已不存在 可以用Q…...

编程日记 2024/2/2 23:19:12

Logstash 7.7.1版本安装系统梳理

前言 上一篇文章介绍了 《ElasticSearch7.7.1集群搭建 & Kibana安装》&#xff0c;今天说一下 Logstash的安卓和配置&#xff1b; Logstash是一个开源的数据收集引擎&#xff0c;具有实时管道功能。它可以动态地将来自不同数据源的数据统一起来&#xff0c;并将数据标准化…...

编程日记 2024/2/2 23:18:11

4. sass实用函数归纳

4. sass实用函数归纳 字符串函数 1、quote(string) 给字符串添加引号 quote(xiaoming) // "xiaoming"2、unquote(string) 移除字符串的引号 unquote("xiaoming") // xiaoming3、str-index(string, substring) 返回 substring 子字符串第一次在 stri…...

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

《元梦之星》赛季更新带来“新”内容，为何却被玩家集体声讨？

前段时间&#xff0c;《元梦之星》迎来了“山海奇遇”赛季的重磅更新&#xff0c;诸多“新”内容的上线吸引了很多玩家们的关注&#xff0c;然而在新版本开启之后没有多&#xff0c;新玩法新时装甚至是游戏中的新改动都引起了不少玩家的不满。 在新赛季开启之后&#xff0c;玩家…...

编程日记 2024/2/2 23:12:05

故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab）

效果一览 文章概述 故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab） 模型描述 卷积神经网络（Convolutional Neural Network，CNN）和支持向量机（Support Vector Machine，SVM）是两种常用的机器学习算法，它们在不同领域和任务中都表现出…...

编程日记 2024/2/2 23:11:04

菜鸡后端的前端学习记录-2

前言 记录一下看视频学习前端的的一些笔记&#xff0c;以前对Html、Js、CSS有一定的基础&#xff08;都认得&#xff0c;没用过&#xff09;&#xff0c;现在不想从头再来了&#xff0c;学学Vue框架&#xff0c;不定时更新&#xff0c;指不定什么时候就鸽了。。。。 忘了记一下…...

编程日记 2024/2/2 23:10:03

Layui + Echarts 5.0

Layui 怎么整合最新版本的 Echarts 5.0&#xff0c;Echarts 4 升级到 5后&#xff0c;有了很大改变&#xff0c;新的配置项4是无法兼容的&#xff0c;所以想要使用新的功能&#xff0c;都需要升级&#xff01; 新建一个echarts.js文件 layui.define(function (exports) {// 这…...

编程日记 2024/2/2 23:08:01

linux使用iptables禁用ip

iptables是什么&#xff1f; iptables 是一个强大的开源软件&#xff0c;它是 Linux 系统内核中 netfilter 包过滤框架的一部分&#xff0c;用来实现防火墙功能。iptables 提供了一种灵活的方式来控制和管理进出以及通过 Linux 计算机的网络流量。 前提 我在云服务器上用doc…...

编程日记 2024/2/2 23:07:00

安全防御第五次作业

拓扑图及要求如下&#xff1a; 实验注意点&#xff1a; 先配置双机热备&#xff0c;再来配置安全策略和NAT两台双机热备的防火墙的接口号必须一致双机热备时&#xff0c;请确保vrrp配置的虚拟IP与下面的ip在同一网段如果其中一台防火墙有过配置&#xff0c;最好清空或重启&…...

编程日记 2024/2/2 23:05:59

分库分表原则

分库分表原则 单表数据到达千万级别或者20存储空间 优化已经解决不了问题一 IO瓶颈导致性能问题 拆分策略 垂直分库 以表为依据&#xff0c;根据业务将不同的表拆分到不同库中&#xff0c;有点像微服务 垂直分表 以字段为依据&#xff0c;根据字段属性将不同字段拆分到不同…...

编程日记 2024/2/2 23:03:56

VUE PC端可拖动悬浮按钮

一、实现效果&#xff1a; 二、FloatButton.vue <template><div><div class"sssss"><div class"callback float" mousedown"down" touchstart"down" mousemove"move" touchmove"move" mous…...

编程日记 2024/2/2 23:01:54

opencv0014 索贝尔（sobel）算子

前面学习的滤波器主要是用来模糊图像&#xff0c;今天一起来了解关于边缘识别的滤波吧&#xff01;嘿嘿 边缘 边缘是像素值发生跃迁的位置&#xff0c;是图像的显著特征之一&#xff0c;在图像特征提取&#xff0c;对象检测&#xff0c;模式识别等方面都有重要的作用。 人眼如…...

编程日记 2024/2/2 23:00:52

深度解析：汇率结算下的货代对账困局，如何利用 AI 与 RPA 构建底层逻辑？

【前言】在国际物流与货运代理行业&#xff0c;财务对账向来是一块“硬骨头”。尤其是涉及跨国业务时&#xff0c;汇率的实时波动与多币种结算的交叉影响&#xff0c;使得原本复杂的账目核对工作呈几何倍数增加。传统的人工对账模式不仅效率低下&#xff0c;且在面对分位数的四…...

编程新知 2026/3/26 21:54:03

MCP开发环境搭建全攻略（VS Code插件安装避坑白皮书·2024官方认证版）

第一章&#xff1a;MCP开发环境搭建全攻略&#xff08;VS Code插件安装避坑白皮书2024官方认证版&#xff09;前置依赖检查与系统准备 在安装任何 MCP 相关插件前&#xff0c;请确保已安装以下基础组件&#xff1a;VS Code 1.85&#xff08;推荐 1.87.2&#xff09;、Node.js 1…...

编程新知 2026/3/26 21:03:50

BFR算法实战：如何高效处理大规模数据聚类

1. BFR算法&#xff1a;大数据时代的聚类利器 第一次接触BFR算法是在处理一个电商平台的用户行为数据集时。当时我们遇到了一个棘手的问题&#xff1a;服务器内存只有32GB&#xff0c;但需要处理的用户行为日志却超过了200GB。传统的K-means算法完全无法应对这种规模的数据&…...

编程新知 2026/3/26 20:33:46

用Arduino UNO R3和面包板，从零组装你的第一台meArm机械臂（附电源模块避坑指南）

用Arduino UNO R3和面包板&#xff0c;从零组装你的第一台meArm机械臂&#xff08;附电源模块避坑指南&#xff09; 当你第一次看到meArm机械臂灵活抓取物体的视频时&#xff0c;是否也想过自己动手组装一台&#xff1f;作为开源硬件领域的经典项目&#xff0c;meArm以其精巧的…...

编程新知 2026/3/26 20:09:41

DeepSeek-OCR 2技术突破：动态视觉token重排效果展示

DeepSeek-OCR 2技术突破&#xff1a;动态视觉token重排效果展示 1. 引言 想象一下&#xff0c;当你阅读一份复杂的学术论文时&#xff0c;眼睛不会机械地从左上角扫到右下角&#xff0c;而是会自然地跳过标题、关注图表、追踪公式推导&#xff0c;甚至在不同的文本栏之间灵活…...

编程新知 2026/3/26 18:58:41

Unity游戏开发：A*寻路算法实战，5步搞定NPC智能移动（附完整Demo）

Unity游戏开发&#xff1a;A*寻路算法实战指南与高级优化技巧 在游戏开发中&#xff0c;NPC的智能移动一直是开发者需要解决的核心问题之一。想象一下&#xff0c;当玩家在《魔兽世界》中穿越荆棘谷时&#xff0c;那些巡逻的巨魔守卫是如何绕过树木和山丘找到最短路径的&#x…...

编程新知 2026/3/26 18:44:39

pyNastran：破解工程仿真困境的Python技术革新者

pyNastran&#xff1a;破解工程仿真困境的Python技术革新者 【免费下载链接】pyNastran A Python-based interface tool for Nastrans file formats 项目地址: https://gitcode.com/gh_mirrors/py/pyNastran 揭示行业痛点&#xff1a;有限元分析的三大核心挑战 现代工程…...

编程新知 2026/3/26 18:36:37

深入解析WIFI中EAP-TLS认证流程与安全机制

1. EAP-TLS认证&#xff1a;WIFI安全连接的基石 每次我们用手机连接公司或学校的WIFI时&#xff0c;系统总会弹出一个证书确认的窗口&#xff0c;这就是EAP-TLS在发挥作用。作为目前最安全的WIFI认证协议之一&#xff0c;它就像网络世界的"护照查验系统"&#xff0c;…...

编程新知 2026/3/26 18:07:59

用2万小时人类视频预训练机器人，一场豪赌还是必经之路？

先说结论核心验证了“人类数据缩放定律”&#xff1a;在灵巧操作任务上&#xff0c;模型性能随人类预训练数据量对数线性增长&#xff0c;为数据策略提供了可预测的依据。成功的关键在于“两阶段迁移”设计&#xff1a;用大规模、廉价但“嘈杂”的人类数据奠基通用结构&#xf…...

编程新知 2026/3/26 13:26:57

LFM2.5-1.2B-Thinking-GGUFGPU算力：单卡支持4并发+32K上下文稳定推理

LFM2.5-1.2B-Thinking-GGUFGPU算力&#xff1a;单卡支持4并发32K上下文稳定推理 1. 平台概述 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。该模型采用GGUF格式和llama.cpp运行时&#xff0c;提供了简洁易用的单页Web界…...

编程新知 2026/3/26 13:16:56