这里利用的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. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  2. PPIO 分布式存储在数据分发上有哪些优势?

    ​PPIO 是为开发者打造的去中心化存储与分发平台,让数据存储更便宜.更高速.更隐私.官方网站是 pp.io.PPIO 不仅仅是个存储平台,也是一个分发平台.之前我们写了许多文章介绍 PPIO 的存储 ...

  3. sql查询统计

    SELECT TOP 50 (select text from sys.dm_exec_sql_text(sql_handle)) as [SQL], CAST( ((qs.total_elapsed ...

  4. TNS-12541: TNS: 无监听程序 解决方案

    转自   感谢   https://www.cnblogs.com/yx007/p/6732012.html 问题描述 在用PL/SQL Developer连接Oracle 11g时报错“ORA-12 ...

  5. 面试题_lambda函数调用

    res多少? def func(): return [lambda x: i * x for i in range(4)] res = [m(2) for m in func()] # print(r ...

  6. 关于Unity单个对象多个脚本的Update调用的时序问题

    先说几句废话, 最近在研究Unity, 这玩意用起来比较简单, 而且商店里还有各种插件, 初学者也能轻松拼凑出一个像模像样的游戏(顺便说一句,自己做着玩就无所谓了,但随便拼凑个辣鸡丢出来骗钱就不好了) ...

  7. 刘志梅201771010115.《面向对象程序设计(java)》第十七周学习总结

    实验十七  线程同步控制 实验时间 2018-12-10 1.实验理论知识 多线程    多线程是进程执行过程中产生的多条执行线索.进程    线程是比进程执行更小的单位.线程不能独立存在,必须存在于 ...

  8. 检测Tensorflow可用设备(比如:显卡)

    打开python命令行,输入以下命令: python -c "from tensorflow.python.client import device_lib;device_lib.list_ ...

  9. 关于matlab2018a版本错误使用 svmclassify 分类器

    当我们照常使用分类器函数svmclassify时,2018版的matlab会报出以下错误: 解决办法: 1,下载libsvm(一般下载最新版本就ok了)包,并将其添加至matlab的toolbox文件 ...

  10. flask+redis实现抢购(秒杀)功能

    今天面试了 一家非常高大上的公司,问了我关于redis的实用性问题,但是答的不是很好,所以下午通过再次学习 redis,实现相关实用性功能的一种. 对于抢购功能,难点在于 抢购时 由于高并发请求,导致 ...