数据劫持

最新推荐文章于 2023-12-12 16:37:33 发布

苏小拉

最新推荐文章于 2023-12-12 16:37:33 发布

阅读量231

点赞数 1

分类专栏： vue 文章标签： vue js html5

本文链接：https://blog.csdn.net/weixin_51061364/article/details/113802475

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数据劫持

也叫属性拦截器,vue.js是通过它实现双向绑定的

数据发生变化时,获取到数据,

1 在input框中输入内容时,绑定的对象数据也会发生变化.

2 修改对象中的数据,input框也可以发生变化.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="text" oninput="changeData(this)" name="" id="">
  <div> </div>
  <script>
    let Person = { name: '你好' }
    let temp = null;
    function changeData(obj) {
      // 获取输入框内容,赋给person对象
      Person.name = obj.value;

      Object.defineProperty(Person, 'name', {
        get: function () {
          return temp;
        },
        set: function (val) {  // 获取到正在修改的值
          temp = val
          console.log('数据在修改');
        }
      })
      edit(Person.name);
    }

    function edit(val) {
      document.querySelector('div').innerHTML = val;
    }

  </script>
</body>

</html>