基于proxy简单实现数据的双向绑定

最新推荐文章于 2023-12-05 18:30:03 发布

遇见颜言

最新推荐文章于 2023-12-05 18:30:03 发布

阅读量226

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_59068879/article/details/128255654

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <input type="text" id="input">
    <input type="text" id="show">
</div>
<script>
 let obj = {};
 const input = document.getElementById('input');
 const show = document.getElementById('show')
// 设置代理
 let newobj = new Proxy(obj,{
   set(target, p, value, receiver) {
     if(p === 'text') {
         input.value = value;
         show.value = value
     }
    return Reflect.set(target,p,value)
   },
   get(target, p, receiver) {
    return Reflect.get(target,p)
   }
 });
 input.addEventListener('keyup',function (e){
   newobj.text = e.target.value;
 })
 show.addEventListener('keyup',function (e){
     newobj.text = e.target.value;
 })
</script>
</body>
</html>