实现一个双向绑定

Slueia

于 2021-04-08 16:04:07 发布

阅读量76

点赞数

分类专栏：面试题

本文链接：https://blog.csdn.net/Slueia/article/details/115523102

版权

面试题专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Proxy双向绑定</title>
</head>
  <body>
    <input id="input_el" oninput="inputHandler(this)">
    <br/>
    <div id="show_el"></div>
  </body>
</html>

<script>
  function proxy_bind(target){
    return new Proxy(target, {
      get(obj, props){
        console.log('get' + obj[props])
        if(!obj[props]){
          obj[props] = 'hello'
        }
        return obj[props]
      },
      set(obj, props, newValue){
        obj[props] = newValue
        document.getElementById('show_el').innerText = newValue
        return
      }
    })
  }

  let obj = {}

  let obj_bind = proxy_bind(obj)

  function inputHandler (c){
    console.log(c.value)
    obj_bind.value = c.value
  }

  ;(function (){
    document.getElementById('show_el').innerText = obj_bind.value
    document.getElementById('input_el').value = obj_bind.value
  })()
</script>

Slueia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个双向绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Proxy双向绑定</title></head> <body> <input id="input_el" oninput="inputHandler(this)"> <br/> <div id="show_e
复制链接

扫一扫