js双向绑定

题目来源：

JS37 双向绑定

描述

请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件（oninput）
3. 可以使用预设代码"_render"函数
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <input type="text">
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            var inp = document.querySelector('input');
            inp.value = person.weight;
            const _render = () => {
                var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
                ul.innerHTML = str;
                inp.value = person.weight;
            }
            _render(ul);
            // 补全代码
           

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

预览：

1.首先我们需要先监听input输入框，当输入框内容发生变化时，触发回调函数更新person.weight值

inp.oninput=function(){
    person.weight=this.value
}

这段代码给输入框（<input>）添加了一个oninput事件监听器。当输入框的值发生变化时，即用户输入内容时，会触发该事件，并执行相应的回调函数。在这个回调函数中，将输入框的值赋给person.weight属性，实现了实时更新person对象的体重属性。

但仅仅这样子，并不能事实更新页面种体重的显示值，因为没有重新渲染的操作。

2.我们需要为person的属性设置getter和setter方法。

Object.keys(person).forEach((key)=>{
    var value = person[key];
    Object.defineProperty(person,key,{
        get(){
            return value;
        },
        set(newValue){
            value=newValue;
            _render();//重新执行渲染函数
        }
    })
})

这段代码使用Object.defineProperty方法为person对象的每个属性定义了一个getter和setter。在getter中，返回属性对应的值；在setter中，将新的值赋给属性，并调用_render()函数重新渲染页面。通过这种方式，当person对象的属性发生改变时，会自动更新页面上显示的相关内容。

总结

首先要监听输入框的变化，并将输入框的值实时更新到person对象的体重属性中。同时，通过使用Object.defineProperty方法定义getter和setter，实现了当person对象的属性发生改变时，自动重新渲染页面。

描述

猜你喜欢