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. LINUX 常用命令(一)

    1.LINUX系统常用命令实例: A0 LINUX命令分内置命令和非内置命令! 一般而言,内置命令就是指在/bin ./usr/bin下系统默认的命令! 非内置命令需要加上命令的绝对路径执行!比如我们 ...

  2. on duplicate key update简单使用

    1.最近在做项目的时候,遇到这样的一个问题,就是我每做完一件事情,都要更新一下统计表,然而要更新统计表,就要根据主键去统计表里面去查询是否已经有这样的一条记录,如果有那么就更新,如果没有那么就插入一条 ...

  3. windows 下 bat 计划任务删除保留时间内文件

    date  windows 打印时间戳  年:echo %date:~,% 月:echo %date:~,% 日:echo %date:~,% 星期:echo %date:~,% 小时:echo %t ...

  4. Django logging配置

    1,在项目下建个文件夹    log 2,在django的setting的配置下添加路径     BASE_LOG_DIR = os.path.join(BASE_DIR, "log&quo ...

  5. ES6走一波 数组的扩展

    Array flat 数组实例的扁平化方法(浏览器支持不佳) 建议使用 lodash的 flatten

  6. Django部署方法

    Windows方案: Apache2.4 + Django2.0 网上的方法乱七八糟: 那么接下来:最好的方法,不行吃屎. 当前环境是Django2.0+ python35(64bit) 部署原因: ...

  7. pyhton之Reportlab模块

    reportlab模块是用python语言生成pdf文件的模块 安装:pip install reportlab 模块默认不支持中文,如果使用中文需要注册 1.注册中文字体 下载自己需要的.ttf字体 ...

  8. vim配置(使用Vundle)

    1.前言 Vim的配置文件位于~/.vimrc,文件使用VimScript语法来编写. 2. vim插件管理 Vundle是一个全自动的插件管理器,让我们通过维护插件列表的方式管理插件.它为安装.更新 ...

  9. SQL Server2016安装

    VS2017已经发布10多天了,这几天正好要重新做系统.所以想着把SQL Server和VS都做一次升级.VS2017只需要下载一个安装包就可以进行在线安装.但是SQL Server2016安装时会碰 ...

  10. 【原创】大数据基础之Airflow(1)简介、安装、使用

    airflow 1.10.0 官方:http://airflow.apache.org/ 一 简介 Airflow is a platform to programmatically author, ...