浅谈js数据动态绑定

最新推荐文章于 2024-07-31 18:16:05 发布

苏雪冷音

最新推荐文章于 2024-07-31 18:16:05 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签： js 数据绑定 js面向对象

本文链接：https://blog.csdn.net/suxuelengyin/article/details/80666329

版权

本文探讨了JavaScript中利用Object.defineProperty实现的数据动态绑定。通过监听input元素的keyup事件，当输入值变化时，自动更新相关计算结果。然而，这种方式的绑定并不适用于直接修改DOM元素的值，因为它依赖于键盘事件来触发更新。

摘要由CSDN通过智能技术生成

最近看到一个解释动态绑定的方案。

HTML代码

<input type="text" id="aa" />*
    <input type="text" id="cc" />
    <span id="bb">{
  {hello}}</span>

界面如下

js代码

        var obj = {};
        Object.defineProperty(obj, 'hello', {
            enumerable: true,
            configurable: true,
            get: function () { return document.getElementById('aa').value; },
            set: function (val) {
                document.getElementById('bb').innerHTML = val * obj.hello2;
            }
        });
        Object.defineProperty(obj, 'hello2', {
            enumerable: true,
            configurable: true,
            get: function