v-model JS 中实现

vue 中一般使用 v-model做数据双向绑定 今天用JS实现下

• 定义两个元素显示标签

     <p></p>
    <input type="text">
    // 再定义一个数据常量
     const data = {
             msg: '哈哈哈',
          };
     var ps = document.querySelector('p');
     var inputs = document.querySelector('input');  
     
      // 把msg 赋值给两个显示标签
      ps.innerText = data.msg;
      inputs.value = data.msg;
     

下面开始做数据绑定

• 首先给 input 框添加监听事件

//给input 注册监听时间动态修改 data.msg 的值    input -> data
      // 这里只监听input事件
      inputs.addEventListener("input", function() {
          // 把监听到的值 赋值给data
          data.msg = inputs.value;
          // 这里输出的就是输入框中改变后的值
          console.log(data.msg);
          // 同样把值赋给显示标签 p
          ps.innerText = data.msg;
          console.log('input数据改变了');
        });

• 给data对象做数据监听

    // 首先拿到现在的值
    var temp = data.msg;
    Object.defineProperty(data, "msg", {
         get() {
            console.log('get' + temp);
            return temp;
          },
         set(e) {
            在控制在中动态修改msg 的值这里就会发生变化
            temp = e;
            inputs.value = e;
            ps.innerText = inputs.value;
         }
 });

到这在js中做数据动态绑定就完成了