014 - 双向数据绑定 - 输入框绑定（v-modal）

Create by jsliang on 2020-04-23 15:30:57
Recently revised in 2020-04-23 16:56:14

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言

二 前言

返回目录

核心：

index.html

<input type="text" v-modal="myName">

index.js

// 绑定 v-modal
const attrs = node.attributes;
[...attrs].forEach((attr) => {
  const attrName = attr.name;
  const attrValue = attr.value;
  if (attrName === 'v-modal') {
    node.value = this._data[attrValue];
    node.addEventListener('input', (e) => {
      const inputValue = e.target.value;
      this._data[attrValue] = inputValue;
    });
  }
});

通过查找节点，然后看是否有 v-modal，对该节点的 input 操作进行监听，然后进行数据绑定更改。

---

不折腾的前端，和咸鱼有什么区别！

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。