class MVVM {
constructor(options) {
this.$options = options;
this.$el = options.el;
this.$data = options.data;
this.observe(this.$data);
new Compile(this);
}
observe(data) {
if (!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key]);
})
}
defineReactive(data, key, value) {
let dep = new Dep();
Object.defineProperty(data, key, {
configurable: false,
enumerable: true,
get: () => {
Dep.target && dep.add(Dep.target);
return value;
},
set: (newVal) => {
if (newVal === value) { return; }
value = newVal;
dep.notify();
}
})
}
}
class Dep {
constructor() {
this.deps = [];
}
add(dep) {
this.deps.push(dep);
}
notify() {
this.deps.forEach(dep => {
dep.update();
})
}
}
class Watcher {
constructor(vm, cb) {
this.vm = vm;
this.cb = cb;
Dep.target = this;
this.vm.$data['word'];
Dep.target = null;
}
update() {
this.cb.call(this.vm, this.vm.$data['word']);
}
}
class Compile {
constructor(vm) {
this.vm = vm;
this.changeInputValue(vm);
}
changeInputValue(vm) {
let inputs = document.querySelectorAll('input');
Array.from(inputs).forEach(input => {
this.update(input,vm);
input.addEventListener('input', (e) => {
vm.$data['word'] = e.target.value;
}, false)
})
}
update(input,vm) {
input.value = vm.$data['word'];
new Watcher(vm, function (value) {
input.value = value;
})
}
}

如何实现两个input框的同步更新的更多相关文章

  1. bootstrap的两种在input框里面增加一个图标的方式

    具体代码如下: <div class="input-group"> <div class="input-icon-group"> < ...

  2. 单个input框上传多个文件操作

    HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...

  3. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

  4. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  5. (网页)input框怎么覆盖掉数字英文的

    例子1: <input type="text" value="0" onkeyup="cleartwoNum(this)"> / ...

  6. 微信小程序-两个input叠加,多次点击字体变粗或闪动

    问题描述: 当两个input叠加,多次点击input框, placeholder 字体变粗或input框闪动.如图: 代码: <!-- 最上层input-1 --> <input p ...

  7. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  8. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  9. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

随机推荐

  1. MySQL系列(五)--二进制日志对主从复制的影响

    MySQL复制是基于主库上的二进制日志来完成,复制是异步的,可能存在延迟 MySQL日志分为: 1.服务层日志:二进制日志.通用日志.慢查日志 2.存储引擎层日志:innodb中重做日志和回滚日志 二 ...

  2. 通过游戏学python 3.6 第一季 第一章 实例项目 猜数字游戏--核心代码 可复制直接使用 娱乐 可封装 函数

    本文实例讲述了python实现的简单猜数字游戏.分享给大家供大家参考.具体如下: 给定一个1-99之间的数,让用户猜数字,当用户猜错时会提示用户猜的数字是过大还是过小,知道用户猜对数字为止,猜对数字用 ...

  3. 20190815-$N \Theta IP$

    $NOIP$ 请选择您想测试的难度: 「困难」 「困难的地狱」 「能被神犇切掉的」 「你做不出来的」 「简单(完成前面所有后解锁)」 要难死了-- 考试过程: 首先看看三道题: 这是NOIP模拟测试? ...

  4. Lab2 新增的细节

    entry.S 新增加了这个入口函数 bootloader 加载完成后 将执行 kern_entry 而非lab1 中的kern_init defs.h 使用了 ({})宏定义的方式,并且执行了一行定 ...

  5. Leetcode54. Spiral Matrix螺旋矩阵

    给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ...

  6. ubuntu16安装python3.7

    ####################################################源码安装python,注意shell脚本第一行开头的要求#################### ...

  7. python 中if __name__=="__main__"

    if __name__=="__main__":表示当执行运行文件为当前代码所在文件时,则会执行if__name__=="__main__":后的语句. 如果这 ...

  8. 运行Jmeter时,响应数据中文乱码问题解决办法

    需要修改jmeter中的配置,在Jmeter安装目录/bin/jmeter.properties文件中进行修改: sampleresult.default.encoding默认为ISO-8859-1, ...

  9. ArcGISTiledMapServiceLayer

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一 ...

  10. 合唱队形 ( 双向LIS )

    #include <iostream> #include <stdio.h> #include <algorithm> using namespace std; ] ...