题目来源:
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
对象的属性发生改变时,自动重新渲染页面。