vue v-model双向绑定源码实现demo

最新推荐文章于 2023-12-24 08:47:51 发布

qq_33761266

最新推荐文章于 2023-12-24 08:47:51 发布

阅读量340

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_33761266/article/details/104112712

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <input type="text" v-model="height">
    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{height}}</p>
</div>
<script>
  let data = {
    name: '搜索',
    age: 55,
    height: 558,
  };
  let app = document.getElementById('app');
  let inputs = document.getElementsByTagName('input');
  let nodeList = [ ...app.children ].filter(item => item.nodeName != 'INPUT');
  let cloneList = nodeList.map(item => item.cloneNode(true));
  console.log(cloneList);
  for (let item of inputs) {
    if (item.getAttribute('v-model')) {
      item.value = data[item.getAttribute('v-model')];
    }
    item.oninput = function () {
      data[this.getAttribute('v-model')]=this.value;
    };
  }
  let reg = /\{\{(\w+)}}/;
  nodeList.forEach((item) => {
    if (reg.test(item.innerHTML)) {
      item.innerHTML = item.innerHTML.replace(reg, (...arg) => {
        console.log(arg);
        return data[arg[1]];
      });
    }
  });
  Object.defineProperties(data, {
    name: {
      set(val) {
        for (let item of inputs) {
          if (item.getAttribute('v-model') === 'name') {
            item.value = val;
          }
        }

        cloneList.forEach((item, index) => {
          nodeList[index].innerHTML = item.innerHTML.replace(/\{\{name}}/g, val);
        });
      },
      get() {

      },
    }, age: {
      set() {
        console.log('age');
      },
      get() {

      },
    },
  });

</script>
</body>
</html>

qq_33761266

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue v-model双向绑定源码实现demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text...
复制链接

扫一扫