vue双向绑定的简单实现

最新推荐文章于 2023-04-21 23:53:07 发布

强运

最新推荐文章于 2023-04-21 23:53:07 发布

阅读量74

点赞数

分类专栏：双向绑定文章标签： vue

本文链接：https://blog.csdn.net/weixin_43161796/article/details/108685606

版权

双向绑定专栏收录该内容

0 篇文章 0 订阅

订阅专栏

因为这是没有看vue源码，只知道defineProperty，独自写的，所以并不标准，经供参考！

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #text {
                word-wrap: break-word;
            }

        </style>
        <script>
            document.addEventListener('HTMLInputElement', function () {
                this.aTest = '123';
            });
            console.dir();

        </script>
    </head>

    <body>
        a:<input type="text"
               v-Model='cText' /><br />
        b:<input type="text"
               v-Model="pText" /><br />
        c:<input type="text"
               v-Model="aText" /><br />
        a:<p id="cText"></p>
        b:<p id="pText"></p>
        c:<p id="aText"></p>
        <script>
            document.onkeydown = function (event) {
                if (
                    Object.prototype.toString.call(event.target) ===
                    '[object HTMLInputElement]' && event.target.getAttribute('v-Model')
                ) {
                    setTimeout(function () {
                        obj[event.target.getAttribute('v-Model')] =
                            event.target.value;
                    }, 0);
                }
            };
            let obj = {
                pText: '',
                aText: '',
                cText: '',
            };
            Object.keys(obj).forEach((x) => {
                Object.defineProperty(obj, x, {
                    configurable: false,
                    get: function (e) {
                        return e;
                    },
                    set: function (e) {
                        document.getElementById(x).innerText = e;
                        return e;
                    },
                });
            });

        </script>
    </body>

</html>

强运

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向绑定的简单实现

因为这是没有看vue源码，只知道defineProperty，独自写的，所以很不标准，经供参考！<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录