菜鸟学习记录-----proxy实现数据双向绑定

最新推荐文章于 2024-08-09 21:30:00 发布

围城

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量94

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lvke210/article/details/118741809

版权

现在的框架中实现双向绑定已经十分方便,这里在原生html中实现一下.

在这里插入图片描述

<!--
 * @Description:  proxy实现数据双向绑定
 * @Author: owen
 * @Date: 2021-07-15 00:30:02
 * @LastEditTime: 2021-07-15 00:40:54
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" v-model="content">
  <input type="text" v-model="content">
  <button v-bind="content">hello world</button>
  <script>
    function View(){
      const proxy=new Proxy({},{
        get(obj,property){
        },
        set(obj,property,value){
          document.querySelectorAll(`[v-model=${property}]`).forEach((item)=>{
            item.value = value
          })
          document.querySelectorAll(`[v-bind=${property}]`).forEach((item)=>{
            item.innerHTML = value
          })
        },
      })
      this.init = function(){
        document.querySelectorAll("[v-model]").forEach((item)=>{
          item.addEventListener("keyup",function(){
            proxy[this.getAttribute("v-model")] = item.value
          })
        })
      }
    }
    new View().init()
  </script>
</body>
</html>```

菜鸟学习记录,手写加深印象

围城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
菜鸟学习记录-----proxy实现数据双向绑定

现在的框架中实现双向绑定已经十分方便,这里在原生html中实现一下.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫