对于前端来说,我们的难点存在的位置不是复杂的业务逻辑,更不是样式之类的处理,而是数据·····
拿Vue这个框架来说,它使用的就是双向数据绑定的模式,看起来很高大上的一种模式,同时大大的减少了我们的工作量,以及复杂的处理数据的工作;
其他的不多说,直接上代码,简单的实现数据的“联动”。
<!DOCTYPE html> <html lang="zh"> <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>Document</title> </head> <body> <div class="container"> <div id="content"> <input type="text" id="input"/> </div> <p id="pra"></p> </div> </body> <script> var target = document.getElementById('input'); document.addEventListener('keyup',function(e) { var str = e.target.value; var pra = document.getElementById('pra'); pra.innerHTML = str }) </script> </html>
上面的代码就是,整个实现的代码,通过事件监听的方式来进行数据变化的监听,然后进行对应的 数据的变化。
当然上面的方式是不考虑优化的前提的,只是最简单的实现;