标签: 手撕v-model

Object.defineProperty

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  手写一个简单双向绑定<br />
  <input type="text" id="model"><br />
  <div id="modelText"></div>
 </body>
 <script type="text/javascript">
  var user = {
   name: '希染'
  };
  var defaultName = '希染'

  var input = document.querySelector("#model");
  var text = document.querySelector("#modelText");

  input.value = user.name;
  text.textContent = user.name;

  // 数据到视图 model => view
  Object.defineProperty(user, "name", {
   get: function() {
    console.log('获取user')
   },
   set: function(val) {
    console.log('修改user')
    input.value = val;
    text.textContent = val;
   }
  })

  // 视图到数据 view => model
  input.addEventListener('input', function(val) {
   user.name = input.value;
  })
 </script>
</html>
Mr.Song2022/9/12...小于 1 分钟