vue v-model实现原理(V-model的使用和原理)

 分类:vue教程时间:2022-09-03 07:30:02点击:
vue v-model实现原理(V-model的使用和原理)网址:

在我们开发中,表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单。特别是注册页面和登录页面等等,我们需要获取用户输入的信息。

在使用Vue的时候,假如我们想获取用户输入的数据,我们可以使用v-model指令来实现表单元素和数据的双向绑定。

什么是双向绑定呢?请看简单的示例代码

运行效果:

以上代码看似只是一个普通的数据绑定,但当我们使用v-model指令来绑定属性值的时候,我们修改<input>标签里面的值时,我们观察message属性的值也会跟着变化。假如我们在<input>标签里面把“Hello World”修改成“Hello Vue”

我们可以看见<label>标签也发生了变化。由此可见message属性的值已经绑定<input>标签里面,当我们修改里面的值时,message属性的值也会跟随着改变。

那么v-model的原理是怎样的呢?

v-bind:value="message" 我们可以获取message属性的值然后绑定到<input>标签里面。

v-on:input="message=$event.target.value"

我们先来看看<input>标签的input事件

oninput 事件在用户输入时触发,它是在元素值发生变化时立即触发;

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。


所以v-model其实是一个语法糖,它背后包含两个操作

1.v-bind:value 绑定一个value属性

2.v-on指令给当前元素绑定input事件

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: