学习过vue的同学对v-model应该都不陌生，下面对v-model进行详细介绍，让面试官听到你的答案眼前一亮！

v-model大部分情况都是在表单元素上使用，实现和表单元素的双向绑定，是一个语法糖。

v-model作用在普通文本框时，实际上是value属性和input事件的语法糖。

作用在单选框和多选框时，它是checked属性和change事件的语法糖。

你不知道的v-model

v-model除了作用在表单元素之外，还可以用在自定义组件中，当用在自定义组件时，默认也是value属性和input事件的语法糖。但可以通过在组件中配置model的prop和event进行修改。

在自定义组件中使用v-model时，默认给子组件绑定了value属性和input事件。

在组件中修改默认属性和事件分别为：age和change

实现一个简易版的model指令--myModel，能实现普通文本框和多选框的双向数据绑定

功能是实现了，但代码写的很烂。。。

Vue.directive('myModel', {
  inserted(el, binding, vnode) {
    let event = '';
    if (el.type === 'text') {
      event = 'oninput';
      el.value = binding.value;
    } else {
      event = 'onchange';
    }
    el[event] = function(e) {
      if (el.type === 'text') {
        vnode.context[binding.expression] = e.target.value;
      } else {
        let index = vnode.context[binding.expression].indexOf(e.target.value);
        if (index > -1) {
          vnode.context[binding.expression].splice(index, 1);
        } else {
          vnode.context[binding.expression].push(e.target.value);
        }
      }
    };
  },
  update(el, binding) {
    if (el.type === 'text') {
      el.value = binding.value;
    } else {
      for (let i = 0; i < binding.value.length; i++) {
        if (el.value === binding.value[i]) {
          el.checked = true;
        }
      }
    }
  },
});

写在最后

如有错误，欢迎评论指出。代码有更好的方法也欢迎一起谈论。