这里利用的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. 拓展abaqus python 模块

    abaqus python 本身自带一些模块: 在安装路径:\\SIMULIA\Abaqus\6.14-1\tools\SMApy\python2.7\Lib\site-packages和另外一个2. ...

  2. 【Dubbo源码学习】负载均衡算法(1)-随机算法

    /** * random load balance. * */public class RandomLoadBalance extends AbstractLoadBalance { public s ...

  3. jdk1.8源码解析(1):HashMap源码解析

    jdk1.8 HashMap数据结构 图1-HashMap类图 图2-TreeNode类图 由图1-HashMap类图可知HashMap底层数据结构是由一个Node<K,V>的数组构成.具 ...

  4. 基于嵌入式linux路由转发功能的实现

    环境 arm7开发板, uclinux系统,kernel version: linux-2.4.x arm芯片的单网卡双网口设备,eth0 WAN口 ipaddr 192.168.9.61 eth0: ...

  5. 【sql】ALTER更新数据库字段

    --数据库表字段更新sql脚本,以下是示例 --新增列字段 --alter table table_name add column `address` varchar() COLLATE utf8_b ...

  6. oracle、grid 用户ID

    oracle.grid 用户ID [root@db-rac02 rules.d]# id oracle uid=54321(oracle) gid=54321(oinstall) groups=543 ...

  7. 使用docker创建静态网站应用-多种方式

    能承载静态网站的服务器有很多,本文使用,nginx.apache.tomcat服务器演示docker静态网站应用设置 一,创建docker文件, 不同服务器的docker文件不一样,下面分别创建ngi ...

  8. 一台机器部署多个tomcat服务 nginx反向代理多个服务 笔记

    安装tomcat步骤           1. 下载apache-tomcat-8.0.30 ,下载下来的文件为apache-tomcat-8.0.30-windows-x64.zip         ...

  9. JAVA中通过Jaxp操作XML文件基础

    Java中有多种方式操作XML文件,目前讲一讲以SUN公司提供的DocumentBuilderFactory工厂类对象操作XML. 使用XML基本操作就是需要CRUD(增删改查),那么首先通过一个查询 ...

  10. 编译在docker alpine中可用的go程序

    get docker image docker pull golang build docker run -it --rm -v `pwd`:/root/src -w /root/src golang ...