模拟v-model

最新推荐文章于 2023-06-08 11:32:33 发布

一只勤劳的二哈

最新推荐文章于 2023-06-08 11:32:33 发布

阅读量317

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u014262793/article/details/106412723

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

模拟 v-model

// 1. 通过绑定的数据，给元素设置value
// 2. 当触发input事件时，去更改数据的值
// 3. 更改数据后，同步input的value值
Vue.directive('mymodel', {
  bind (el, binding, vnode) {
    const vm = vnode.context;
    const { value, expression } = binding;
    el.value = value;

    el.oninput = function (e) {
      const inputVal = el.value;
      vm[expression] = inputVal;
    }
  },
  update (el, binding) {
    const { value } = binding;
    el.value = value;
  },
})