let data = {}
const input = document.getElementsByClassName('input')[0];
Object.defineProperty(data,'ss',{
get:function(old){
console.log(123)
},
set:function(value){
console.log('set方法')
this.value = value;
console.log(this.hasOwnProperty('ss'));
console.log(this.ss)
console.log(data);
insert()
}
})
// console.log(typeof(input.value))
//input propertychange
input.onchange = function(e){
 
}
function insert(){
let newEl = document.getElementsByClassName('new')[0];
newEl.innerHTML = data.value
}
input.addEventListener('input', function() {
data.ss = input.value
});

双向数据绑定原生js的更多相关文章

  1. 原生js实现双向数据绑定

    一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...

  2. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  3. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  4. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  5. js实现一个简单的响应式双向数据绑定

    一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...

  6. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  7. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  8. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  9. JS 双向数据绑定、单项数据绑定

    简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. $m$ 整除 $10^k$ 的一个充分条件

    若 (1) 既约分数 $\cfrac{n}{m}$ 满足 $0<\cfrac{n}{m}<1$; (2) 分数 $\cfrac{n}{m}$ 可以化为小数部分的一个循环节有 $k$ 位数字 ...

  2. Centos 7 图形安装笔记(超详细)

    1. 下载虚拟机(VMware Workstation Pro) 2. 安装虚拟机(Windows下安装虚拟机,自行网上搜索) 3. 下载Centos 7.4系统(国内建议使用阿里云: http:// ...

  3. java.util.zip.ZipException: invalid entry size

    启动maven项目时报java.util.zip.ZipException: invalid entry size (expected 7612 but got 5955 bytes) 可能是mave ...

  4. Lua中的闭包

    [什么是闭包?] 闭包在Lua中是一个非常重要的概念,闭包是由函数和与其相关的引用环境组合而成的实体.我们再来看一段代码: function newCounter() return function ...

  5. nginx优化之keepalive

    一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...

  6. java 学习之环境配置

    准备JDK 到Java官网下载jdk即可,网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html. 配置开发环境 鼠 ...

  7. 装饰器模式&&ES7 Decorator 装饰器

    装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...

  8. 在macOS下使用MAXPP搭建本地开发服务器简易流程

    本文适用于解决前端开发时所需的服务器支持,包括文件上传和下载.在开发环境中需要保持尽量的开放,并不是安全的.根据浏览器安全协议,所下载的开源项目是不能直接在file中直接打开的,需要把文件放置在服务器 ...

  9. xmind-HTTP协议

  10. tensorflow建造神经网络-【老鱼学tensorflow】

    上次我们添加了一个add_layer函数,这次就要创建一个神经网络来预测/拟合相应的数据. 下面我们先来创建一下虚拟的数据,这个数据为二次曲线数据,但同时增加了一些噪点,其图像为: 相应的创建这些伪造 ...