10行代码-原生JS双向数据绑定演示

最新推荐文章于 2021-09-17 20:26:09 发布

weixin_33805992

最新推荐文章于 2021-09-17 20:26:09 发布

阅读量84

点赞数

原文链接：https://juejin.im/post/5c91a7ecf265da60cf50eb27

版权

很简单的10行代码就可以实现输入框与页面实时显示的绑定，也就是百度一下一大堆的所谓的双向数据绑定，完全没有必要搞那么长

function test() {
  const container = document.createElement('div');
  const inputBar = document.createElement('input');
  container.appendChild(inputBar);
  const textBar = document.createElement('div');
  container.appendChild(textBar);
  inputBar.addEventListener('input', () => textBar.innerHTML = inputBar.value);
  return container;
}
document.body.appendChild(test());
复制代码

创建一个test.html试一试：

<html>
<head>
  <meta charset="UTF-8">
  <title>two-way-binding</title>
</head>
<body>
</body>
<script>
function test() {
  const container = document.createElement('div');
  const inputBar = document.createElement('input');
  container.appendChild(inputBar);
  const textBar = document.createElement('div');
  container.appendChild(textBar);
  inputBar.addEventListener('input', () => textBar.innerHTML = inputBar.value);
  return container;
}
document.body.appendChild(test());
</script>
</html>
复制代码

演示结果如下：

转载于:https://juejin.im/post/5c91a7ecf265da60cf50eb27

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33805992

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10行代码-原生JS双向数据绑定演示

很简单的10行代码就可以实现输入框与页面实时显示的绑定，也就是百度一下一大堆的所谓的双向数据绑定，完全没有必要搞那么长function test() { const container = document.createElement('div'); const inputBar = document.createElement('input'); container.appendC...
复制链接

扫一扫