- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0"
- />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <title>
- Proxy vue 双向绑定
- </title>
- </head>
- <body>
- <div id="app">
- <h3 id="papagraph">
- </h3>
- <input type="text" id="input" />
- </div>
- </body>
- </HTML>
- <script>
- const papagraph = document.getElementById('papagraph');
- const input = document.getElementById('input');
- const data = {
- text: 'hello'
- }
- const handler = {
- set: function(target, prop, value) {
- if (prop === 'text') {
- target[prop] = value
- papagraph.innerHTML = value
- return true;
- } else {
- return false;
- }
- }
- }
- const myTest = new Proxy(data, handler);
- input.addEventListener(
- 'input',
- e => {
- myTest.text = e.target.value;
- },
- false
- )
- </script>
来源: http://www.bubuko.com/infodetail-2923557.html