手写一个简单的vue双向数据绑定

it2024-02-20  60

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="ipt"> <div id="box"></div> <script> let a = 1; //1.先获取元素 let ipt = document.getElementById('ipt'); let box = document.getElementById('box'); //设定数据上一个对象,用于和view视图实现双向数据绑定 var str = {} // //先初始化view视图,简单实现数据绑定 ipt.value = str.name; box.innerHTML = str.name; //通过Object.defineProperty知道对象属性变了 Object.defineProperty(str,'name',{ get(){ return ipt.value; }, set(val){ ipt.value = val; box.innerHTML = val; }, writeable:true, }) ipt.addEventListener('keyup',function(){ box.innerHTML = ipt.value; }) </script> </body> </html>

 

最新回复(0)