<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript setter, getter</title> </head> <body> <input type="text" id="inputUsername" v-model="data.username"> <input type="text" id="inputPassword" onkeyup="setValueByKey('password', this.value)"> <div id="username">admin</div> <div id="password"></div> <script> function scanElementsByAttr(tag, attr) { var aElements = document.getElementsByTagName(tag); for (var i = 0; i < aElements.length; i++) { var value = aElements[i].getAttribute(attr); if (!value) { continue; } aElements[i].onkeyup = function() { var value = this.getAttribute(attr); var arr = value.split('.'); if (arr.length == 1) { window[arr[0]] = value; return; } var data = window; for (var i=0; i<arr.length-1; i++) { data = data[arr[i]]; console.log(arr[i]) } data[arr[i]] = this.value; } } } scanElementsByAttr('input', 'v-model'); var data = { username: '', password: '', get username() { return 'username:' + this.username; }, get password() { return 'password:' + this.password; }, set username(value) { document.getElementById('username').innerHTML = value; }, set password(value) { document.getElementById('password').innerHTML = value; } }; data.username = 'admin'; data.password = '123456'; function setValueByKey(k, v) { console.log(k, v) data[k] = v; } </script> </body> </html>
相关推荐
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
通过带着读者手写简化版的vue双向绑定,了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定,让大家可以更好的理解双向绑定的逻辑走向; 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3...
先声明,该代码是网上一位大佬提供的,但是学习它的代码过程中...该压缩文件内容是vue数据双向绑定的实现与原理解析,提供核心完整代码,并有我的代码注释,浅显易懂,但是需要es6的学习和有一定的javascript基础才行。
vue 双向数据绑定原理。
vue双向绑定的原理实现·············································· ·····························
vue双向绑定原理
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
通过 Proxy(defineProperty)来实现对数据的监听,通过给数据和方法形成一种绑定
1.首先我们先了解下实现Vue双向绑定的核心方法Object.defineProperty(obj, prop, descriptor) ... vue双向绑定原理 vue双向绑定原理 var view = title; var model = { title: }; function handle() {
在vue 中想要知道 vue 双向数据绑定原理
web前端面试题汇总-精美桌面-vue双向绑定原理,把面试题设置成桌面,每天打开电脑就学习一遍,加强记忆。会不断更新,不断上传!
主要介绍了Vue双向绑定实现原理与方法,结合实例形式详细分析了发布者-订阅者模式、脏值检查、数据劫持与双向绑定相关实现技巧,需要的朋友可以参考下
Vue中的数据实现响应式绑定 1、对象实现响应式: 是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布...
本文实例讲述了Vue 的双向绑定原理与用法。分享给大家供大家参考,具体如下: Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model=xxx /> 的方式来实现双向绑定。下面是一个最简单的示例 <h2>...
本文主要介绍了vue双向数据绑定的原理,文章结尾附上完整demo下载。具有一定的参考价值,下面跟着小编一起来看下吧
主要介绍了vue双向绑定原理及实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
主要介绍了Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定),非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧