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. [Luogu P1516]青蛙的约会

    按照题意,显然可以列出同余方程,k即为所求天数,再将其化为不定方程 ,那么对这个方程用扩展欧几里德算法即可得出k,q的一组解,但是方程有解的充要条件是(m – n) 和L不同时为零并且x – y是m ...

  2. CSS之使用display:inline-block来布局

    css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内 ...

  3. python中jsonpath模块的运用

    1. jsonpath介绍用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种语言实现版本,包括:Javascript, Python, ...

  4. Apache Ambari安装过程(CentOS 6.5)

    一.准备环境 1.host 本人准备了三台服务器, vim /etc/hosts 192.168.1.131 dk11 192.168.1.132 dk21 192.168.1.133 dk31 2. ...

  5. sort与uniq命令详解

    1.sort的作用 (排序) sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出. 如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行 ...

  6. ActiveMQ的Destination高级特性

    1.    Composite Destinations  组合目的地 组合队列Composite Destinations : 允许用一个虚拟的destination代表多个destinations ...

  7. Redis和memcahce的区别【转】

    先给大家讲一个基本知识点:数据库分类大致分为两类,关系型数据库和非关系型数据库.如果详细区分的话,还可以继续分下去. Redis不仅仅是缓存数据库 面试的时候,很多人会问,Redis和memcahce ...

  8. win10安装mysql5.7.20解压版

    mysql安装包可到官网下载,地址:https://dev.mysql.com/downloads/mysql 1.首先解压文件包,我这解压到E:\install_work\mysql目录下: 2.发 ...

  9. Git使用七:修改最后一次提交、删除文件和重命名文件

    修改最后一次提交: 在实际开发中,可能会遇到以下两种情景:情景一:版本刚一提交(commit)到仓库,突然想起漏掉两个文件还没有添加(add).情景二:版本刚一提交(commit)到仓库,突然想起版本 ...

  10. ECMAScript6 - 2.变量的解构赋值

    1.数组解构赋值 1.1.基本用法 // (1)对数组变量赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo; // 1 bar; // 2 baz; // ...