欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue用Object.defineProperty手写一个简单的双向绑定的示例

程序员文章站 2022-07-12 22:54:14
...

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>
  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  modelText .textContent=defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      console.log("你来拿值啦！");
      return defaultName; // //这里不能直接用userInfo.name，执行.又会进入defineProperty
    },
    set: function (value) {
      defaultName = value;
      model.value = value;  //值改变的时候触发数据更新
      console.log("你来修改值啦！");
      console.log(value);
      modelText.textContent = value;
    }
  })
 
  userInfo.name = "new value";
  var isEnd = true;
 
  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //加入监听中文输入事件
  model.addEventListener("compositionstart", function () {
    console.log("开始输入中文啦");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("结束输入中文啦");
  })
</script>
</html>
相关标签： 日常笔记 vue vue.js

上一篇： AcWing 1402 星空之夜

下一篇： Acwing 1402. 星空之夜 连通块哈希

推荐阅读