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 一块网卡配置多个IP的方法

    1:ifconfig eth0:0 192.168.211.200/24 up 2:ip addr add 192.168.211.201/24 dev eth0 labe eth0:1 man ip ...

  2. 用sklearn 实现linear regression

    基本的regression算法有四种方法可以实现,分别是下面四种 LinearRegressionRidge (L2 regularization)Lasso (L1 regularization)E ...

  3. iPhone8再MacOS上修改手机铃声

    1 选择下载好的mp3铃声文件,导入到itunes 2 将音乐改成AAA模式, 设置你的铃声时长 3 show in finder 找到文件,将mpr后缀修改成m4r,并删除掉mp3文件,将m4r文件 ...

  4. vue安装scss,并且全局引入

    在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知道,每写一个.vue文件都要在st ...

  5. 【先验知识归纳】Flask快速入门

    本文参考:快速入门 - Flask 0.10.1 文档 路由 Flask使用route修饰器来关联URL与程序函数: @app.route('/') def hello_world(): return ...

  6. c#基础之Type

    官方文档:https://msdn.microsoft.com/zh-cn/library/system.type%28v=vs.110%29.aspx?f=255&MSPPError=-21 ...

  7. nginx问题相关记录

    nginx目前主要用来做反向代理和负载均衡,其实它也可以是一个web服务器: 1.反向代理: location /api/ { proxy_next_upstream error timeout ht ...

  8. Gin 路由解析树详解

    说明: 无意间看到gin 中有trees的属性,好奇想一探究竟,到底gin是怎样生成路由解析树的? 这是一个测试截图,图中大概可以了解到gin是怎样做路由解析的.配合源码的阅读,解析树大致如下: 通过 ...

  9. asp.net core 通过ajax调用后台方法(非api)

    1.    在Startup.cs文件中添加:        services.AddMvc();            services.AddAntiforgery(o => o.Heade ...

  10. 小程序获取formid配置模板消息

    小程序无限获取formid,发送模板信息 1.发送模板信息需要条件:formid 2.formid产生环境:提交form表单产生,并且只有真机才能出现————安卓一个13位的时间戳(近期使用得时候,安 ...