实现双向数据绑定

文章目录

  • 1 实现双向数据绑定

1 实现双向数据绑定

通过 Object.defineProperty 方法对 obj.text 属性进行了数据劫持,实现了当 obj.text 的值发生变化时,自动更新输入框和页面上的 < span > 元素的内容。同时,通过监听输入框的 keyup 事件,实时更新 obj.text 的值。

<input id="input" type="text" placeholder="请输入内容">
<span id="span"></span>
let obj = {};
let input = document.getElementById('input');
let span = document.getElementById('span');
input.addEventListener('keyup', function(e) {obj.text = e.target.value;
});
Object.defineProperty(obj, 'text', {configurable: true,enumerable: true,get() {console.log('获取数据了');},set(newValue) {console.log('更新数据了');input.value = newValue;span.innerHTML = newValue;}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/69664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows生成SSL的PFX格式证书

生成crt证书: 安装openssl winget install -e --id FireDaemon.OpenSSL 生成cert openssl req -x509 -newkey rsa:2048 -keyout private.key -out certificate.crt -days 365 -nodes -subj "/CN=localhost" 转换pfx openssl pkcs12 -export -out certificate.pfx…

win10 llamafactory模型微调相关① || Ollama运行微调模型

目录 微调相关 1.微调结果评估 2.模型下载到本地 导出转换&#xff0c;Ollama运行 1.模型转换&#xff08;非常好的教程&#xff01;&#xff09; 2.Ollama 加载GGUF模型文件 微调相关 1.微调结果评估 【06】LLaMA-Factory微调大模型——微调模型评估_llamafactory评估-C…

如何在Vue中实现事件处理

在Vue中&#xff0c;事件处理是一个核心概念&#xff0c;它让我们能够响应用户的操作&#xff0c;比如点击按钮、输入文本等。Vue提供了一个简洁而强大的方式来绑定事件和处理事件。本文将介绍如何在Vue中实现事件处理&#xff0c;覆盖事件绑定、事件修饰符以及事件处理函数等内…

国产编辑器EverEdit - 各种符号显示的效果

1 符号显示详解 打开主菜单查看 -> 符号显示可以展开如下相关显示选项菜单 1.1 各符号显示开关说明 1.1.1 当前行 打开该选项时&#xff0c;光标所在行会有淡淡的背景色&#xff0c;如下图所示&#xff1a; 如果用户不喜欢当前行的背景色&#xff0c;可以自行调整&#…

【深度学习】Java DL4J 2024年度技术总结

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

Spring基于文心一言API使用的大模型

有时做项目我们可能会遇到要在项目中对接AI大模型 本篇文章是对使用文心一言大模型的使用总结 前置任务 在百度智能云开放平台中注册成为开发者 百度智能云开放平台 进入百度智能云官网进行登录&#xff0c;点击立即体验 点击千帆大模型平台 向下滑动&#xff0c;进入到模型…

内容中台赋能人工智能技术提升业务创新能力

内容概要 在当今快速变化的市场环境中&#xff0c;企业需要不断寻求创新以保持竞争力。内容中台作为一种新型的内容管理架构&#xff0c;能够极大地提升企业在内容创建、管理和分发方面的效率。通过与人工智能技术的深度融合&#xff0c;企业能够将海量的数据和信息转化为有价…

大语言模型需要的可观测性数据的关联方式

可观测性数据的关联方式及其优缺点 随着现代分布式架构和微服务的普及&#xff0c;可观测性&#xff08;Observability&#xff09;已经成为确保系统健康、排查故障、优化性能的重要组成部分。有效的可观测性数据关联方式不仅能够帮助我们实时监控系统的运行状态&#xff0c;还…

【JavaWeb10】服务器渲染技术 --- JSP

文章目录 &#x1f30d;一. JSP❄️1.JSP介绍❄️2.JSP 运行原理❄️3.page 指令(常用的)❄️ 4.JSP 三种常用脚本1.声明脚本2.表达式脚本3.代码脚本 ❄️5.JSP 内置对象❄️6.JSP 域对象 &#x1f30d;二. EL❄️1.EL 表达式介绍❄️2.EL 运算操作❄️3.EL 的 11 个隐含对象 &…

Unity Dots理论学习-5.与ECS相关的概念

DOTS的面向数据编程方式比你在MonoBehaviour项目中常见的面向对象编程方式更适合硬件开发。可以尝试理解一些与数据导向设计&#xff08;DOD&#xff09;相关的关键概念&#xff0c;以及这些概念如何影响你的代码&#xff0c;对你在MonoBehaviour项目中的C#编程通常是较少涉及的…

Git 与 Git常用命令

Git 是一个开源的分布式版本控制系统&#xff0c;广泛用于源代码管理。与传统的集中式版本控制系统不同&#xff0c;Git 允许每个开发者在本地拥有完整的代码库副本&#xff0c;支持离线工作和高效的分支管理。每次提交时&#xff0c;Git 会对当前项目的所有文件创建一个快照&a…

1 推荐系统概述

推荐系统概述 1 推荐系统的意义平台方信息生产者&#xff08;物品&#xff09;信息消费者&#xff08;用户&#xff09;推荐和搜索的区别 2 推荐系统架构系统架构算法架构 3 推荐系统技术栈算法画像层召回/粗排精排重排序 工程 1 推荐系统的意义 信息生产者&#xff08;平台方…

变化检测论文阅读合集

1. ChangeCLIP: Remote sensing change detection with multimodal vision-language representation learning 作者&#xff1a;Sijun Dong a, Libo Wang b, Bo Du c, Xiaoliang Meng a,* 年份&#xff1a;2024 研究方法/模型&#xff1a; 重构原始CLIP&#xff1a;提取双时…

使用EVE-NG-锐捷实现单臂路由

一、基础知识 1.三层vlan vlan在三层环境中通常用作网关vlan配上ip网关内部接口ip 2.vlan创建步骤 创建vlan将接口划分到不同的vlan给vlan配置ip地址 二、项目案例 1、项目拓扑 2、项目实现 PC1配置 配置PC1IP地址为192.168.1.10/24网关地址为192.168.1.1 ip 192.168.1…

mysql运维

1、msyqlLinux通用二进制安装 1. MySQL :: Download MySQL Community Server (Archived Versions)https://downloads.mysql.com/archives/community/https://downloads.mysql.com/archives/community/https://downloads.mysql.com/archives/community/https://downloads.mysql…

嵌入式LINUX驱动开发入门之hello驱动(基于IMX6ULL-MINI开发板)

1.驱动前提 编译驱动程序之前要编译内核&#xff0c;原因主要是&#xff1a; &#xff08;1&#xff09;驱动程序要用到内核文件&#xff1a; 比如驱动程序中这样包含头文件: #include <asm/io.h>&#xff0c; 其中的asm是一个链接文件&#xff0c;指向asm-arm或asm-m…

chrome-mojo C++ Bindings API

概述 Mojo C 绑定 API 利用C 系统 API提供一组更自然的原语&#xff0c;用于通过 Mojo 消息管道进行通信。结合从Mojom IDL 和绑定生成器生成的代码&#xff0c;用户可以轻松地跨任意进程内和进程间边界连接接口客户端和实现。 本文档通过示例代码片段提供了绑定 API 用法的详…

centos 8和centos 9 stream x64的区别

以下是 CentOS 8 与 CentOS Stream 9 的主要区别&#xff0c;从技术架构、更新策略到适用场景等维度进行对比&#xff1a; AI产品独立开发实战营 联系我了解 1. 定位与更新策略 特性CentOS 8CentOS Stream 9定位原为 RHEL 8 的免费稳定复刻版RHEL 9 的上游开发分支&#xff…

物联网软件开发与应用方向应该怎样学习,学习哪些内容,就业方向是怎样?(文末领取整套学习视频,课件)物联网硬件开发与嵌入式系统

随着物联网技术的飞速发展&#xff0c;物联网软件开发与应用方向成为了众多开发者关注的焦点。那么&#xff0c;如何在这个领域中脱颖而出呢&#xff1f;本文将为你提供一份详细的学习指南&#xff0c;帮助你从零开始&#xff0c;逐步掌握物联网软件开发与应用的核心技能。 一…

DeepSeek之于心理学的一点思考

模型和硬件参数对应关系参考 模型参数规模 典型用途 CPU建议 GPU建议 最小内存建议 磁盘空间建议 适用场景 1.5b(15亿) 小型推理、轻量级任务 4核以上(Intel i5/AMD Ryzen5) 可选&#xff0c;入门级GPU(如NVIDIA GTX1650 4GB显存) 8GB 10GB以上SSD 小型NLP任务、文…