一個簡單的類似Vue的雙向綁定
阿新 • • 發佈：2017-11-11
input com col .com out 9.png per function 鍵盤事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="text" id="put"> 9 <p id="out"></p> 10 <script> 11 varput = document.getElementById(‘put‘), 12 out = document.getElementById(‘out‘); 13 var data = {} 14 Object.defineProperty(data,‘value‘,{ //data的value值為input的值 15 get: function() { 16 return put.value; 17 }, 18 set:function(newVal) { 19 20 put.value = out.innerHTML = newVal; 21 console.log(put.value) 22 } 23 }) 24 put.onkeyup = function() { //通過鍵盤事件改變span的文本內容同時改變data的value值 25 out.innerHTML = this.value; 26 console.log(data.value)27 } 28 </script> 29 </body> 30 </html>
一個簡單的類似Vue的雙向綁定