这里利用的object.defineproperty() 方法;

<input     id='input'>
<p id='p'><p/>
js:

const data={};
const input=document.getElementById("input");
const p=document.getElementById("p");
Object.defineProperty(data,"text",{
set(value){
input.value=value;
this.value=value;
p.innerHTML=value;
}
})
input.onkeyup=function(e){
data.text=e.target.value;
console.log(data)
}

效果:

以上

用js实现一个简单的mvvm的更多相关文章

  1. 230行实现一个简单的MVVM

    作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届 ...

  2. 如何实现一个简单的MVVM框架

    接触过web开发的同学想必都接触过MVVM,业界著名的MVVM框架就有AngelaJS.今天闲来无事,决定自己实现一个简单的MVVM框架玩一玩.所谓简单,就是仅仅实现一个骨架,仅表其意,不摹其形. 分 ...

  3. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  4. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  6. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  7. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  8. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  9. 一个简单的 MVVM 实现

    简介 一个简单的带有双向绑定的 MVVM 实现. 例子 使用 新建一个 ViewModel 对象, 参数分别为 DOM 元素以及绑定的数据即可. 指令 本 MVVM 的指令使用 data 数据, 即 ...

随机推荐

  1. streamsets

    streamstes用户指南: https://streamsets.com/documentation/datacollector/latest/help/index.html#datacollec ...

  2. python3-基础1

    eval()  --- 返回表达式计算结果 实际上就是把括号中的命令提取出来执行一遍. eval("print('ok')") ok 可变类型: 在ID不变的情况下,value可变 ...

  3. 自动编译批处理设置(MSBuild)

    基本设置,如果想更改可以设置. @echo off rem --------------------------------- rem ----作成者:李暁賓--------------- rem - ...

  4. TCP/IP学习20180710-数据链路层-ICMP协议

    1.ICMP协议IP协议不保证数据送达.则应有协议保证数据送达.ICMP就是其中的重要协议.ICMP:(Internet Control Messages Protocol)因特网信报控制协议当传送I ...

  5. CleanMyMac X教程之-安装卸载

    Mac清理软件CleanMyMac X的出现成功的吸引了Mac用户的注意,CleanMyMac X是2018年发布的,深受许多Mac用户的青睐.windows操作端有360等众多清洁软件,那么Mac端 ...

  6. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  7. Linux基础上

    文件操作                                                                                                 ...

  8. linux dd命令 创造一个文件

    创造一个1G的文件 dd if=/dev/zero of=/nod/tmp/test bs=1M count=1024 创造一个1T的文件 [root@oracledg tmp]# dd if=/de ...

  9. MFC 单文档调用对话框

    1.插入新的Dialog,如下图: 2.修改ID位 IDD_XMB 3.在单文件的Menu 中选中需要链接的按键,右键添加处理程序,如下图所示,添加完成后,在项目的xxxview.cpp中会生成如下函 ...

  10. SQL对于 小数处理的小结

    DECLARE @digital INT --截断小数位 ,,)),@digital) AS 截断小数位 --上抛小数位 ,,)),@digital) AS 上抛小数位 SELECT CEILING ...