啥是双向绑定，两种方式实现两个简单双向绑定

看代码

<input type="text"><script>let ipt = document.querySelector("input")let str = "请输入"ipt.value = stript.addEventListener("change", (e) => {str = e.target.value})</script>

以上代码写前端的都认识，input里面的value值会被赋值给str变量，但是当str变量本身发生变化的时候，input的value却不会产生变化，因为我们的addEventListener是单纯对input标签进行的监听，而没有函数对str这个值进行监听，当然我们可以使用以下的方法实现str和input的同步

<input type="text"><button>改变str的值</button><script>let ipt = document.querySelector("input")let str = "请输入"ipt.value = stript.addEventListener("change", (e) => {str = e.target.value})//改变str的方法let but = document.querySelector("button")but.addEventListener("click", () => {str = "改变str"ipt.value = str})</script>

但是我们可以注意到这种写法中我们还要点击一个button，我们想让这个str变量直接动态改变，input不用其他操作自动改变其value，由此我们就引入了双向绑定的概念，而其中的重点在于增样去监听变量的set方法，如str=“hahha”

以下是两种简单的双向绑定事件

第一种是利用defineProperty

<body><input type="text" class="ipt"><script>let ipt = document.querySelector(".ipt")let obj1 = {} //代理者let obj2 = { iptVal: '其输入' } //被代理者Reflect.defineProperty(obj1, "iptVal", {get () {// 试图获取obj1.iptVal的值时，会返回obj2.iptValreturn obj2.iptVal},set (newVal) {// 当给obj1.iptVal设置新值的时候，obj2.iptVal的值也会更新，同时input的value也会更新obj2.iptVal = newValipt.value = obj1.iptVal}})ipt.value = obj1.iptValipt.addEventListener("change", (e) => {obj1.iptVal = e.target.valueconsole.log(obj1);})</script>
</body>

我们可以通过浏览器的控制台去设置新值去看我们的input中的value会不会直接改变

第二种是Proxy的写法

<body><input type="text" class="ipt"><script>let ipt = document.querySelector(".ipt")let obj1 = { iptVal: "请输入" }let obj2 = new Proxy(obj1, {get (target, index) {return target[index]},set (target, index, value) {target[index] = valueipt.value = value}})ipt.value = obj2.iptValipt.addEventListener("change", (e) => {obj2.iptVal = e.target.value})</script>
</body>

两种写法其实有两个值，一个是和input绑定的监听者，另外一个是提供数据的被监听者，两者能够实现双向绑定的原因还是在于set方法，这个方法能在监听变量的赋值行为，并让我们做出dom操作，这才是最主要的。

今天想写文章，实在不知道写什么才写的这个。

啥是双向绑定，两种方式实现两个简单双向绑定相关推荐

java的两种方式_java 两种方式的区别？
成员函数方式 package cn.com.ch09; class FatherTest{ public void pet(String str){ System.out.println(str); ...
【SpringBoot】项目实现热部署的两种方式
前言 spring boot : 2.0.0.RELEASE maven eclipse 另外还需清楚什么是热部署,以及为什么要热部署. SpringBoot项目中实现热部署的两种方式,使得部署变得异 ...
java jobdetail_Spring创建JobDetail的两种方式
一.Spring创建JobDetail的两种方式定时任务两种方式,Spring很好的封装使用Quartz的细节,第一种方式是利用SPring封装的Quartz类进行特定方法的实现,第二种是通过透明的 ...
SilkTest 对 Excel 表操作的两种方式
SilkTest 对 Excel 表操作的两种方式这两种方式都是对 SilkTest 运用的最基础的东西,我写得也比较简单.国内这方面的资料实在太少,对初学者可能有帮助. 方式一 : Data D ...
【JetPack】视图绑定 ( ViewBinding ) 各种应用 ( 视图绑定两种方式 | Activity 布局 | 对话框布局 | 自定义组件布局 | RecyclerView 列表布局 )
文章目录 I . 视图绑定 ( ViewBinding ) 界面的两种方式 II . Activity 界面中应用视图绑定 ( ViewBinding ) III . Dialog 对话框界面中 ...
java两种绑定方式_Javascript绑定事件的两种方式的区别
命名函数 function check(){ //code } 匿名函数 window.onload = function(){ //先获取元素对象,再绑定事件,绑定的是匿名函数不可重用 var bt ...
SpringBoot配置绑定的两种方式
SpringBoot配置绑定的两种方式演示文件 bean public class Student {private String name;private Integer age;public S ...
MVVM处理TreeView的SelectedItem的绑定的两种方式
TreeView的SelectedItem不支持MVVM绑定: 因为它是只读的. 有时候我们就需要对它进行绑定最新经过测试的解决方案(附加属性的方式) 参考:https://stackoverflo ...
react 调用 html5,React-Native Webview 和H5交互的两种方式
React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...

啥是双向绑定，两种方式实现两个简单双向绑定

啥是双向绑定，两种方式实现两个简单双向绑定相关推荐

最新文章

热门文章