vue v-model实现简单的案例？

很多同学都分不清，封装input实现双向绑定，跟不封装input实现双向绑定的，有什么区别，怎么用，那么今天咱们就来说一下v-model数据双向绑定。

首先先来看个基础的代码：

<input v-model="str" />

// 等同于 

<input :value="str" @input="sth = $event.target.value" />

通过上面的代码，我们可以分析得出，也就是说： v-model="str" 是 :value="str" @input="str = $event.target.value" 的缩写。

解释：

$event 指代当前触发的事件对象。

$event.target 指代当前触发的事件对象的dom

$event.target.value 就是当前dom的value值

在@input方法中，value => str

在:value中：str => value

如此，形成了一个闭环，也就是所说的数据的双向绑定。

自定义组件怎么实现