原生js实现数据双向绑定
双向绑定
使用原生js实现数据的双向绑定。
关于vue的双向数据绑定,其核心是 Object.defineProperty()方法
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
Object.defineProperty(obj, prop, desc)
obj:需要定义属性的当前对象。
prop:当前需要定义的属性名。
desc:具体的改变方法。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>双向绑定</title></head><body><input id="a1" oninput="hangdleChange()"/><span id="a2"></span></body>
</html>
<script>let input = document.getElementById('a1')let span = document.getElementById('a2')let data = {}Object.defineProperty(data,'val',{get:function(){return val},set:function(newVal){val = newValinput.value = valspan.innerHTML = val}})function hangdleChange(){data.val = input.value}
</script>
原生js实现数据双向绑定相关推荐
- 数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定
近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件
1.在外部封装js方法 很多页面都会用到相同的方法,为了代码的复用,可以在外部封装相同的方法 在项目中创建一个utils目录,存放外部封装的js方法 在utils目录下创建getDate.js文件 e ...
- Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
- 数据双向绑定_手写 Vue3 数据双向绑定 理解Proxy
前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...
- 前端之Vue:模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录 一. 模板语法 插值语法 二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...
- EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系 和 事件关系 两种 . 前者操作数据时 ,后者触发事件时. 下面简单 的介绍Eng 中 的 w ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 小程序input实现数据双向绑定
小程序input实现数据双向绑定 最终效果 index.wxml index.js 最终效果 index.wxml <view class="uploader">< ...
最新文章
- icp mysql_MySQL · 特性分析 · Index Condition Pushdown (ICP)
- php作为弱语言是最棒的~哈哈哈哈
- python列表多重赋值
- JAVA语法基础 动手动脑及课后作业
- 【转载】java读取.properties配置文件的几种方法
- IntelliJ IDEA 使用Maven工具 (新手入门简单操作,maven的下载,安装,配置)
- java rsa_java中RSA加解密的实现
- Linux gcc 制作静态库01
- 远程桌面保存密码(凭据)的备份导出
- 2018年小米竟发布了16款手机,然而最值得入手的是它!
- 四年级下册英语计算机房和教师办公室的图片,人教版四年级英语下册Unit 1单元知识梳理卷...
- 08-05-09pe_xscan 增加IE版本检测
- github clone加速
- 继电器学习笔记(一)继电器概念
- 2022-2028年中国汽车紧固件行业市场深度分析及投资决策建议报告
- android 全局换字体,Android 全局替换字体
- 前端页面----昵图网(简单版)
- Altium Designer-集成库制作
- 数据稀疏or特征稀疏
- seaborn seaborn色板的使用设置(二)