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. MyEclipse 2015 Stable 2.0破解方法

    本篇博文简单介绍一下利用网上说明的方法破解MyEclipse 2015 Stable 2.0的具体细节.因为原来在贴吧上的方法不够详细,所以本人重新整理了一下.方法源自:http://tieba.ba ...

  2. 校园wifi

    我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...

  3. idea+maven+ssm搭建boot_crm项目遇到的问题

    使用idea+maven+ssm搭建一个boot_crm项目,遇到的问题如下: 1.环境搭建好了,相关配置文件都配置好了,也部署到了tomcat,但是无法启动首页. 通过百度,google找到了,原因 ...

  4. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. L1-Day4

    L1-Day4 1.这消息使她非常悲伤. [我的翻译]The message makes she very sad. [标准答案]The news made her very sad. [对比分析]( ...

  6. linux服务器安装Mysql后,只能看到information_schema/test这两个库,无法修改密码

    参考链接:https://www.cnblogs.com/ThinkVenus/p/7670722.html 问题背景:登录mysql失败,密码错误,由此想到需要更改密码 然而,进入数据库后,只能看到 ...

  7. js设置document.domain实现跨域

    document.domain 只能实现跨子域的问题 如:xxx.com/a.html 和aaa.xxx.com/b.html 或:bbb,xxx.com/c.html 和ccc.xxx.com/d. ...

  8. sort algorithms

    //todo #include<iostream> void swap(int *a, int *b){int temp = *a; *a = *b; *b = temp;} ; i &l ...

  9. Java_修饰符

    目录 访问控制修饰符 非访问修饰符 在java中修饰符主要分为两类:++访问修饰符++和++非访问修饰符++ 访问控制修饰符 修饰符 当前类 同一包内 子孙类 其他包 其他包子孙类 public Y ...

  10. SpringBoot Redis缓存 @Cacheable、@CacheEvict、@CachePut

    文章来源 https://blog.csdn.net/u010588262/article/details/81003493 1. pom.xml <dependency> <gro ...