v-model深入

最新推荐文章于 2025-03-25 21:20:43 发布

~小猿

最新推荐文章于 2025-03-25 21:20:43 发布

阅读量2k

点赞数

分类专栏：尚硅谷电商项目文章标签：前端 html javascript

本文链接：https://blog.youkuaiyun.com/qq_48113035/article/details/122393098

版权

本文详细探讨了v-model的用途，包括它的双向数据绑定功能，以及在VUE2中的实现原理，利用单向数据绑定结合@input事件。同时，文章还阐述了@input与@change事件的区别，并介绍了如何通过v-model实现父子组件之间的数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-model的基本作用

v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。

<!-- 双向数据绑定 -->
<input type="text" v-model="msg">
<span>{
  {msg}}</span>

2.VUE2中v-model的实现原理：单向数据绑定 + 原生DOM事件@input事件

@input事件是在表单数据发生变化的时候被触发，然后修改数据值即可实现双向数据绑定。

<!-- 不用v-model实现双向数据绑定 -->
<input type="text" :value="msg" @input="msg = $event.target.value">
<!-- change事件需要blur一下才会触发 -->
<input type="text" :value="msg" @change="msg = $event.target.value">
<span>{
  {msg}}</span>

@input与@change事件的区别?

@input是当表单输入发生变化的时候就会触发，没有其他条件，而@change事件需要失去焦点才会触发事件。

3.v-model实现父子之间数据同步&#x