0
点赞
收藏
分享

微信扫一扫

实现双向数据绑定

何以至千里 2022-04-04 阅读 44
javascript

1,监听keyup事件,触发则给代理对象的text属性赋值(e.target.value)

2,数据劫持函数:Object.defineProperty(代理对象,“属性”,{get(),set(va)})

set(val)=>input.value=val,span.innerHTML=val

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   input:<input type="text" name="fname" /><br/>
   数据:<span></span>
   <script type="text/javascript">
       let obj={}
       let input = document.getElementsByTagName('input')[0]
       let span = document.getElementsByTagName('span')[0]

       Object.defineProperty(obj,'b',{
           get(){
               console.log('获取数据')
           },
           set(val){
               console.log('修改数据')
               input.value=val
               span.innerHTML=val
           }
       })

       window.addEventListener('keyup',function(e){
        obj.b=e.target.value
       })
   </script>
   
</body>
</html>
举报

相关推荐

0 条评论