题解 | #双向绑定#
双向绑定
https://www.nowcoder.com/practice/d1452ec52a134b328f23b97c02b230bd
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n function observe(target) {\n for(let key in target) {\n let value = target[key]\n Object.defineProperty(target,key, {\n get:function() {\n return value\n },\n set:function(newVal) {\n if(value !== newVal) {\n value = newVal\n _render()\n }\n }\n })\n }\n }\n observe(person)\n inp.oninput = function() {\n person.weight = this.value\n }\n </script>\n </body>\n</html>","libs":[]}
