js代码实现vue双向数据绑定实例
双向数据绑定面试一般都会问到，首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下 ，希望本文能帮助到大家。
Object.defineProperty(obj,propertyName,{ get:function(){
//读取obj对象的propertyName属性时执行
}, set:function(currvalue){
//修改obj对象的propertyName属性时执行
},
});<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js实现vue双向数据绑定 利用访问器属性</title></head><body>
<input bind-value="value" type="text" placeholder="请输入..." id="user-input">
<p bind-text="value" id="show-input"></p>
<script>
var elems=[document.getElementById('user-input'),document.getElementById('show-input')]; var data={
initValue:'',
}; function define(obj,propertyName) {
Object.defineProperty(obj,propertyName,{
get:function(){
return this.initValue;
},
set:function(currvalue){
this.initValue=currvalue; //同步p
scan();
},
});
}
define(data,'value');
data.value='';
scan(); //监听事件
elems[0].addEventListener('keyup',function(e){
var e=e||window.event;
data.value=e.target.value;
}); function scan(){
for(var i=0;i<elems.length;i++){ var ele=elems[i]; for(var j=0;j<ele.attributes.length;j++){ var attr=ele.attributes[j]; if(attr.nodeName.indexOf('bind')>=0){
elems[1].innerHTML=data.value;
elems[0].setAttribute('current-values',data.value);
}
}
}
} </script></body></html>相关推荐：
以上是js代码实现vue双向数据绑定实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
使用ddrescue在Linux上恢复数据
Mar 20, 2024 pm 01:37 PM
DDREASE是一种用于从文件或块设备(如硬盘、SSD、RAM磁盘、CD、DVD和USB存储设备)恢复数据的工具。它将数据从一个块设备复制到另一个块设备，留下损坏的数据块，只移动好的数据块。ddreasue是一种强大的恢复工具，完全自动化，因为它在恢复操作期间不需要任何干扰。此外，由于有了ddasue地图文件，它可以随时停止和恢复。DDREASE的其他主要功能如下：它不会覆盖恢复的数据，但会在迭代恢复的情况下填补空白。但是，如果指示工具显式执行此操作，则可以将其截断。将数据从多个文件或块恢复到单
开源！超越ZoeDepth！ DepthFM：快速且精确的单目深度估计！
Apr 03, 2024 pm 12:04 PM
0.这篇文章干了啥？提出了DepthFM：一个多功能且快速的最先进的生成式单目深度估计模型。除了传统的深度估计任务外，DepthFM还展示了在深度修复等下游任务中的最先进能力。DepthFM效率高，可以在少数推理步骤内合成深度图。下面一起来阅读一下这项工作~1.论文信息标题：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr
谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择
Apr 01, 2024 pm 07:46 PM
谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流
BTCC教学：如何在BTCC交易所绑定使用MetaMask钱包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸钱包）是一款免费的、广受好评的加密钱包软件。目前，BTCC已支持绑定MetaMask钱包，绑定后可使用MetaMask钱包进行快速登入，储值、买币等，且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中，我们将详细介绍如何注册和使用MetaMask，以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么？MetaMask小狐狸钱包拥有超过3,000万用户，是当今最受欢迎的加密货币钱包之一。它可免费使用，可作为扩充功能安装在网络
iPhone上的蜂窝数据互联网速度慢：修复
May 03, 2024 pm 09:01 PM
在iPhone上面临滞后，缓慢的移动数据连接？通常，手机上蜂窝互联网的强度取决于几个因素，例如区域、蜂窝网络类型、漫游类型等。您可以采取一些措施来获得更快、更可靠的蜂窝互联网连接。修复1–强制重启iPhone有时，强制重启设备只会重置许多内容，包括蜂窝网络连接。步骤1–只需按一次音量调高键并松开即可。接下来，按降低音量键并再次释放它。步骤2–该过程的下一部分是按住右侧的按钮。让iPhone完成重启。启用蜂窝数据并检查网络速度。再次检查修复2–更改数据模式虽然5G提供了更好的网络速度，但在信号较弱
特斯拉机器人进厂打工，马斯克：手的自由度今年将达到22个！
May 06, 2024 pm 04:13 PM
特斯拉机器人Optimus最新视频出炉，已经可以在厂子里打工了。正常速度下，它分拣电池（特斯拉的4680电池）是这样的：官方还放出了20倍速下的样子——在小小的“工位”上，拣啊拣啊拣：这次放出的视频亮点之一在于Optimus在厂子里完成这项工作，是完全自主的，全程没有人为的干预。并且在Optimus的视角之下，它还可以把放歪了的电池重新捡起来放置，主打一个自动纠错：对于Optimus的手，英伟达科学家JimFan给出了高度的评价：Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉
小红书怎么绑定子账号？它怎么检测账号是否正常？
Mar 21, 2024 pm 10:11 PM
在如今这个信息爆炸的时代，个人品牌和企业形象的建设变得越来越重要。小红书作为国内领先的时尚生活分享平台，吸引了大量用户关注和参与。对于那些希望扩大影响力、提高内容传播效率的用户来说，绑定子账号成为了一种有效的手段。那么，小红书怎么绑定子账号呢？又如何检测账号是否正常呢？本文将为您详细解答这些问题。一、小红书怎么绑定子账号？1.登录主账号：首先，您需要登录您的小红书主账号。2.打开设置菜单：点击右上角的“我”，然后选择“设置”。3.进入账号管理：在设置菜单中，找到“账号管理”或“账号助手”选项，点
阿里7B多模态文档理解大模型拿下新SOTA
Apr 02, 2024 am 11:31 AM
多模态文档理解能力新SOTA！阿里mPLUG团队发布最新开源工作mPLUG-DocOwl1.5，针对高分辨率图片文字识别、通用文档结构理解、指令遵循、外部知识引入四大挑战，提出了一系列解决方案。话不多说，先来看效果。复杂结构的图表一键识别转换为Markdown格式：不同样式的图表都可以：更细节的文字识别和定位也能轻松搞定：还能对文档理解给出详细解释：要知道，“文档理解”目前是大语言模型实现落地的一个重要场景，市面上有很多辅助文档阅读的产品，有的主要通过OCR系统进行文字识别，配合LLM进行文字理
