vue資料的雙向繫結
阿新 • • 發佈:2018-12-26
先看要實現的效果:
再貼程式碼:
<!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> <div id="app"> <input type="text" id="inp" oninput="changeValue(value)"> <p>message is: <span id="spa">{{msg}}</span></p> </div> <script> let tpl = document.getElementById('spa').innerText; let updateView = (data) => { let html = tpl.replace(/{{(.*)}}/, (match, $1) => { return data[$1] || ''; }); document.getElementById('spa').innerText = html; } let data = { msg: '', _data: {} } Object.defineProperty(data, 'msg', { get() { return this._data.msg; }, set(value) { this._data.msg = value; updateView(this); } }) data.msg = ''; let changeValue = (value) => { data.msg = value; } </script> </body> </html>