Vue 双向绑定原理

最新推荐文章于 2024-05-30 11:27:58 发布

洪锦一

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量345

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_16786131/article/details/123593577

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 defineProperty

<body>
    <input type="text" id="inputId">
    <p id="pId"></p>
    <script>
        /*
            defineProperty 定义属性

            第一个参数：要定义的对象
            第二个参数：要定义或修改的属性名称（任意名称）
            第三个参数：将被定义或修改的属性描述
        */

        var obj = {};
        Object.defineProperty(obj, 'name', {
            get() {
                // console.log("get");
                return obj;
            },
            set(newVal) {
                // console.log("set",newVal);
                document.getElementById("inputId").value = newVal;
                document.getElementById("pId").innerHTML = newVal;
            }
        });

        document.getElementById('inputId').addEventListener('keyup', function (e) {
            obj.name = e.target.value;
        })


        //2s后修改数据
        setTimeout(() => {
            obj.name = '8888'
        }, 2000)
    </script>
</body>

优惠劵

洪锦一

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 双向绑定原理

使用 defineProperty<body> <input type="text" id="inputId"> <p id="pId"></p> <script> /* defineProperty 定义属性第一个参数：要定义的对象第二个参数：要定义或修改的属性名称（任意名称）第三个参数：将被定义或修改
复制链接

扫一扫