数据双向绑定v-modal
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就实现了双向数据绑定，实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件，在父组件使用v-on来监听对应的事件并修改相应的数据。 input的v-model就是通过<input :value"value" input"input"…...
Docker 容器jar 运行报错 at sun.awt.FontConfiguration.getVersion 解决方法
docker jar 运行报错 at sun.awt.FontConfiguration.getVersion 初步判断是在运行 Docker 容器中的 JAR 文件时遇到了与字体配置相关的问题。这个问题可能是由于容器内缺少字体配置或字体文件而引起的。 要解决这个问题，你可以尝试以下方法： 1.安装字…...
光学3D表面轮廓仪服务超精密抛光技术发展
随着技术的不断进步，精密制造领域对材料表面的处理要求越来越高，超精密抛光技术作为当下表面处理的尖端技术，对各种高精密产品的生产起到了至关重要的作用，已广泛应用于集成电路制造、医疗器械、航空航天、3C电子、汽车、精密模具…...
详解C++中auto关键字
auto关键字 auto关键字(C11)类型别名思考auto简介auto的使用细则auto与指针和引用结合起来使用在同一行定义多个变量 auto不能推导的场景1.auto不能作为函数的参数2.auto不能直接用来声明数组 auto关键字(C11) 类型别名思考 随着程序越来越复杂，程序中用到的类型也…...
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为…...
线性代数：线性方程组
目录 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理...
标准的排序组合-算法
题目 有若干个字母，要求计算出长度为4的所有可能得组合 解题 排序组合最适用的就是回溯了，建议大家本地debug一层一层的看能好理解点 private static void getResult(List<String> source, Stack<String> temp, int curLength, int maxL…...
2402C++,C++递归取各种节点名字
参考 explicit FindNamedClassVisitor(ASTContext *Context) : Context(Context) {}元<类 T>极 动作(T&e){串 ae->getQualifiedNameAsString();d.加(a);中 真;} bool VisitCXXRecordDecl(CXXRecordDecl *e) {中 动作(e);} bool VisitFunctionDecl(FunctionDecl*e…...
Qt 5.9.4 转 Qt 6.6.1 遇到的问题总结（三）
1.QSet: toList 中的toList 函数已不存在，遇到xx->toList改成直接用，如下： 2.开源QWT 图形库中QwtDial中的 setPenWidth 变成 setPenWidthF函数。 3.QDateTime 中无setTime_t 改为了setSecsSinceEpoch函数。 4.QRegExp 类已不存在 可以用Q…...
Logstash 7.7.1版本安装系统梳理
前言 上一篇文章介绍了 《ElasticSearch7.7.1集群搭建 & Kibana安装》，今天说一下 Logstash的安卓和配置； Logstash是一个开源的数据收集引擎，具有实时管道功能。它可以动态地将来自不同数据源的数据统一起来，并将数据标准化…...
4. sass实用函数归纳
4. sass实用函数归纳 字符串函数 1、quote(string) 给字符串添加引号 quote(xiaoming) // "xiaoming"2、unquote(string) 移除字符串的引号 unquote("xiaoming") // xiaoming3、str-index(string, substring) 返回 substring 子字符串第一次在 stri…...
《元梦之星》赛季更新带来“新”内容，为何却被玩家集体声讨？
前段时间，《元梦之星》迎来了“山海奇遇”赛季的重磅更新，诸多“新”内容的上线吸引了很多玩家们的关注，然而在新版本开启之后没有多，新玩法新时装甚至是游戏中的新改动都引起了不少玩家的不满。 在新赛季开启之后，玩家…...
故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab）
效果一览 文章概述 故障诊断 | 一文解决，CNN-SVM卷积神经网络-支持向量机组合模型的故障诊断（Matlab） 模型描述 卷积神经网络（Convolutional Neural Network，CNN）和支持向量机（Support Vector Machine，SVM）是两种常用的机器学习算法，它们在不同领域和任务中都表现出…...
菜鸡后端的前端学习记录-2
前言 记录一下看视频学习前端的的一些笔记，以前对Html、Js、CSS有一定的基础（都认得，没用过），现在不想从头再来了，学学Vue框架，不定时更新，指不定什么时候就鸽了。。。。 忘了记一下…...
Layui + Echarts 5.0
Layui 怎么整合最新版本的 Echarts 5.0，Echarts 4 升级到 5后，有了很大改变，新的配置项4是无法兼容的，所以想要使用新的功能，都需要升级！ 新建一个echarts.js文件 layui.define(function (exports) {// 这…...
linux使用iptables禁用ip
iptables是什么？ iptables 是一个强大的开源软件，它是 Linux 系统内核中 netfilter 包过滤框架的一部分，用来实现防火墙功能。iptables 提供了一种灵活的方式来控制和管理进出以及通过 Linux 计算机的网络流量。 前提 我在云服务器上用doc…...
安全防御第五次作业
拓扑图及要求如下： 实验注意点： 先配置双机热备，再来配置安全策略和NAT两台双机热备的防火墙的接口号必须一致双机热备时，请确保vrrp配置的虚拟IP与下面的ip在同一网段如果其中一台防火墙有过配置，最好清空或重启&…...
分库分表原则
分库分表原则 单表数据到达千万级别或者20存储空间 优化已经解决不了问题一 IO瓶颈导致性能问题 拆分策略 垂直分库 以表为依据，根据业务将不同的表拆分到不同库中，有点像微服务 垂直分表 以字段为依据，根据字段属性将不同字段拆分到不同…...
VUE PC端可拖动悬浮按钮
一、实现效果： 二、FloatButton.vue <template><div><div class"sssss"><div class"callback float" mousedown"down" touchstart"down" mousemove"move" touchmove"move" mous…...
opencv0014 索贝尔（sobel）算子
前面学习的滤波器主要是用来模糊图像，今天一起来了解关于边缘识别的滤波吧！嘿嘿 边缘 边缘是像素值发生跃迁的位置，是图像的显著特征之一，在图像特征提取，对象检测，模式识别等方面都有重要的作用。 人眼如…...
从S-Function到系统级验证：构建可复用的16QAM Simulink自定义模块库
1. 为什么需要自定义Simulink模块库 在通信系统仿真中，我们经常遇到标准模块库无法满足特定需求的情况。就拿16QAM调制解调来说，虽然Simulink自带通信工具箱，但实际项目中往往需要更灵活的配置和更直观的参数调整界面。我刚开始做通信仿真时…...
5分钟掌握DPlayer：打造专业级HTML5弹幕视频播放器的终极指南
5分钟掌握DPlayer：打造专业级HTML5弹幕视频播放器的终极指南 【免费下载链接】DPlayer :lollipop: Wow, such a lovely HTML5 danmaku video player 项目地址: https://gitcode.com/gh_mirrors/dp/DPlayer DPlayer是一款现代化的HTML5弹幕视频播放器…...
2026届学术党必备的五大降AI率方案实测分析
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 人工智能技术于学术写作领域的运用愈发广泛，给研究者予以从文献综述至草稿生成的…...
5分钟掌握Mermaid Live Editor：免费在线图表编辑终极指南
5分钟掌握Mermaid Live Editor：免费在线图表编辑终极指南 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-edi…...
Docketeer：开源Docker管理平台，替代Docker Desktop的轻量级方案
1. 项目概述：从Docker桌面到开源替代的探索如果你是一名开发者、运维工程师，或者任何需要与容器打交道的技术从业者，大概率对Docker Desktop又爱又恨。爱的是它提供了一个图形化的界面，让容器的管理、镜像的构建变得直观ÿ…...
不想花百元订阅 Microsoft 365？三种免费使用方法来了！
ZDNET 核心要点Microsoft 365 需要订阅才能解锁全部功能，不过，仍可免费使用 Word 和 Excel 等应用程序，免费使用方式包括网页版和移动应用程序。无论处于学习或职业生涯的哪个阶段，可能时不时仍需使用 Microsoft 365（前…...
视频硬字幕提取终极实战：如何用深度学习实现本地化高效提取？
视频硬字幕提取终极实战：如何用深度学习实现本地化高效提取？ 【免费下载链接】video-subtitle-extractor 视频硬字幕提取，生成srt文件。无需申请第三方API，本地实现文本识别。基于深度学习的视频字幕提取框架，包含字幕…...
9.深度剖析MySQL约束的工程设计：自增主键的分布式局限、外键约束的权衡，与CHECK的版本适配实践
目录 一、上节课复习：MySQL到底是个啥玩意儿 主键的坑，你踩过吗？ 二、外键约束：父表和子表的爱恨情仇 实战场景：电商网站的商品下架 三、check约束 一、上节课复习：MySQL到底是个啥玩意儿 首先&#…...
KMS_VL_ALL_AIO：3分钟完成Windows与Office智能激活的终极指南
KMS_VL_ALL_AIO：3分钟完成Windows与Office智能激活的终极指南 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统激活而烦恼吗？KMS_VL_ALL_AIO是一款开源智…...
如何用开源工具解锁被加密的数字音乐文件？
如何用开源工具解锁被加密的数字音乐文件？ 【免费下载链接】ncmdump 转换网易云音乐 ncm 到 mp3 / flac. Convert Netease Cloud Music ncm files to mp3/flac files. 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdump 在数字音乐的世界里，我…...