v-model自定义一个vModel函数

vue中的v-model是双向绑定的, 我们自己用js实现一个双向绑定vModel函数。

//  element 元素或者'#id,.class,div' 得是input标签
//  data 对象
//  将要绑定property 对象中的key

<input class="vmodel"/>

function vModel(element, data, property) {
  if (typeof element === 'string') {
    element = document.querySelector(selector);
  }
  element.value = data[property]; // 初始化输入框的值
  // 监听输入框的输入事件，更新数据
  element.addEventListener('input', function() {
    data[property] = element.value;
  });
  // 监听数据变化，更新输入框的值
  Object.defineProperty(data, property, {
    get: function() {
      return element.value;
    },
    set: function(newValue) {
      element.value = newValue;
    }
  });
}

const inputData = {
    inputText: '初始值1'
}
// 调用后则实现 input的value值 和 inputData.inputText双向绑定
vModel('.vmodel',inputData,'inputText')

这样就完成了双向绑定了，input输入框的值变化绑定的变量也会变化， 绑定的变量值改变则input输入框的值也会变。